Font Awesomeを使ってみました

台風一過の大阪、靭公園のそばからこんにちは。セキネです。昨日分のブログが更新できませんでしたが、それも風雨が強まった午後から休講になったため。その昔、台風や大雨のたびに忙しくなる仕事をしていた身からすれば、なにやら不思議な気分でした。

さて、そんな我々でございますが、昨日からウェブサイトのデザイン&コーディングに励んでおります。個人的にはこれまで作ったサイトには使ってこなかったCSSプロパティ(flexboxなど)、あるいは便利ツールなどなどを駆使できればなと考えている次第。本日は後者・便利ツールのひとつ、Font Awesomeをご紹介したく思います。

アイコン、難しい…

職業訓練校でWebデザインを学ぶにあたり、おそらくは誰もが通るであろう簡単なアイコンの作成。イラレのパスファインダーなんかで家のマークだったり、人のマークだったりを作っていくというやつです。本当に基本的なものであればまだしも、少々頭をひねらなければならないとなると、どうも僕には厳しいものがあったように思います。

そんな悩みを一挙に解決してくれるのが、Font Awesome。キレイなフォントアイコンを手軽にウェブサイトに埋め込むことができる、夢のようなサービスです。ちなみに上の画像のナビ部分も、Font Awesomeのお世話になったものなのです。

Font Awesomeを使いましょう

使い方はとっても簡単。

  • 1. 公式サイトからライブラリを入手
  • 2. 必要なファイルをHTML内に設置
  • 3. 任意のフォントのコードをHTMLファイルにコピー

ものすごくザックリいってしまえば、以上の3ステップです。楽々ゥ~!より詳しい情報は次の記事なんかが分かりやすいと思います。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう|サルワカ
https://saruwakakun.com/html-css/basic/font-awesome

Font AwesomeのAwesomeなところ

Font Awesome、結論からいってほんとに便利です。僕が特にAwesome(=すばらしい!)と思ったのは以下の点。

  • 色やサイズが任意に変えられる
  • 画像ファイルではないので、大きくしてもキレイ!
  • アイコン豊富!SNSのアイコンも揃っている
  • 自分で作るより(当然)イカしてる!
  • そして何より導入がラクチン!

とまあ、節操もなしに褒めちぎってしまったわけでありますが、Font AwesomeがAwesomeであることは揺るぎない事実なのです。ありがとうございます。

結びに

Font Awesome、その存在はちらりと耳に挟んでいましたが、実際に使ってみると本当に便利でした。作業全体の時間短縮にもつながりますし、今後も有効に活用していきたく思います。それと並行してベジェ曲線の練習も…やります。きっとやります。

コメントを残す