HTML/CSSを駆使してWebデザインをしていると、たまにアイコンを設置したくなることがあります。
けれども、いちいちアイコンの画像を作るのも大変だし、それに画像ってサイズや色の調整の関係上扱いづらいという欠点もあります。
でも、たとえばこういうアイコンがコピペだけで設置できたらめちゃくちゃ便利だと思いませんか？
これは、Webフォントというものなのですが、これを使うと驚くほど簡単にアイコンが設置できるんです。
Webフォントを配布しているサイトがいくつかあって、そこから必要なタグをコピペしてHTMLに貼り付けるだけでアイコンが設置できるので超便利です。
そうしたWebフォント配布サイトのなかでも最もオススメなのがFontawesomeというサイトです。
それでは、今回の記事ではそんな超便利サイト「Fontawesome」についてご紹介しましょう。
Fontawesomeの使い方
まずFontawesomeにアクセスします。
すると、こういう画面が表示されます。
赤い矢印で指し示している部分にあるタグをまずコピペします。
このタグをコピーしたら、アイコンを設置したいサイトのHTMLに貼り付けます。
貼り付ける位置はheaderタグ内がよいでしょう。
これはCDNというもので、このタグを貼り付けておくだけで、ページを読み込んだときにアイコンのデータをFontawesomeのサーバーからダウンロードしてくることができるのです。
なので、これを貼り付けておくだけでアイコンデータを自分でダウンロードしてサーバーに設置する必要が無くなるのです。
使いたいアイコンを探す
次に、使いたいアイコンを探します。赤色の矢印で指し示したところに検索窓があるので、ここにキーワードを入れて検索します。
検索は英語でなければ何もヒットしません。
今回は「メール」のアイコンを探したいので「mail」と入力しました。
これと同じで、どんなアイコンを探すときも英語で入力してください。
たとえば車のアイコンなら「car」で、ノートパソコンのアイコンなら「laptop」などです。
検索結果から使いたいアイコンを選ぶ
こんな感じで、検索にヒットしたアイコンが表示されます。
この中から好きなものを選ぶのですが、「PRO」と表示されるものは有料のアイコンです。
Fontawesomeの有料プランに入ると全てのアイコンを利用することができます。
ただ、無料でもかなり豊富な種類があるので、大抵は無料でも困ることはないでしょう。
無料のアイコンだけを表示したいときは、このように「Free」のタグにチェックを入れると、無料アイコンのみをピックアップしてくれます。
これは親切ですよね。
目的のアイコンのタグをコピペする
目的のアイコンのページに入ったら、赤い矢印で示すところにあるタグをコピーしてください。
そして、アイコンを設置したい場所に貼り付けます。
たとえばこのメールのアイコンを使って、「お問い合わせボタン」を作るならこんな感じですね。
HTML:
<a href="javascript:void(0);" id="button_a">
<i class="fas fa-envelope"></i>お問い合わせ
</a>
CSS:
#button_a {
width: 250px;
padding: 10px 0;
display: flex;
background: #FF4300;
color: #FFFFFF;
font-weight: bold;
font-size: 1.5em;
border-radius: 0.3em;
justify-content: center;
align-items: center;
text-decoration: none;
}
#button_a:hover {
background: #FFA900;
}
#button_a i {
margin: 0 5px 0 0;
}このコードを見てもらうとわかると思いますが、アイコンの大きさや色はFontawesomeのタグの親要素の属性で指定します。
画像ではなくフォントとして扱われますので、色を変えるにはcolor属性、大きさを変えるにはfont-size属性の数値で指定します。
アイコンの向きを変える
FontawesomeのWebフォントは、向きを変えるのも簡単です。
クラス名に「fa-rotate-90」や「fa-flip-horizontal」といったクラスを追加するだけです。
<span style="padding: 5px; font-size: 2em; color: green;">
<i class="fas fa-plane"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: green;">
<i class="fas fa-plane fa-rotate-90"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: green;">
<i class="fas fa-plane fa-rotate-270"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: green;">
<i class="fas fa-plane fa-flip-horizontal"></i>
</span>
利用できるクラスの一覧はこんな感じ。
| クラス名 | 効果 |
| fa-rotate-90 | 90°回転 |
| fa-rotate-180 | 180°回転 |
| fa-rotate-270 | 270°回転 |
| fa-flip-horizontal | 水平方向に反転 |
| fa-flip-vertical | 垂直方向に反転 |
| fa-flip-both | 水平垂直両方に反転 |
アイコンをアニメーションさせる
Fontawesomeのタグのクラス名に「fa-spin」や「fa-pulse」といったクラスを追加すると、このようにアイコンをアニメーションさせることもできます。
<span style="padding: 5px; font-size: 2em; color: red;">
<i class="fas fa-spinner fa-pulse"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: blue;">
<i class="fas fa-sync-alt fa-spin"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: yellow;">
<i class="fas fa-star fa-spin"></i>
</span>
<span style="padding: 5px; font-size: 2em; color: green;">
<i class="fas fa-cog fa-spin"></i>
</span>
使えるクラス名は2つだけ。
| クラス名 | 効果 |
| fa-spin | なめらかな回転 |
| fa-pulse | 8ステップの回転 |
という感じです。
アイコンによってアニメーションを使い分けられる感じですね。
どうですか？
ほんと、驚くぐらい簡単ですよね。
僕も最初使ったときはビックリでした。
アイコンの種類も豊富で、非常に多彩な種類のアイコンが揃っています。
SNSのロゴのアイコンなどもありますので、シェアボタンを作るときにも役に立ちます。
知っておくだけで驚くほど重宝しますので、ぜひブックマークに加えてください。
そしてあなたもぜひ、FontawesomeさんのWebフォントを使って、Webデザインをもっと簡単にしてみてください。