デザインのアクセントに。Font Awesomeを使ってアイコンフォントを表示させる方法
この記事はバージョン5以下の内容になります。
Font Awesome 5を使う場合は下記の記事を参考にしてください。
使ってますか。Webフォント。
そしてアイコンフォント。使ってますか。
最近、というか最近でもないですけど、デバイスに依存しないところやバリエーションの多さでWebフォントが主流になりつつありますね。
このブログもNoto Sans CJK JPというWebフォントで表示しているので、WindowsでもMacでも同じフォントで表示されている…はずです。
その便利なWebフォントをアイコンにしたのがFont Awesomeというサービス。
アイコンはWebフォントで表示されるので、どのデバイスで見ても同じように表示されます。
すげー。
ページコンテンツ
Font Awesomeを使うメリット。
アイコンを使うことでよりリッチなウェブサイトを作ることができます。
アイコンを画像で用意することもできますが、スマートフォンでの表示を考えたときに@2xや@3xを作らないといけません。
それを回避するために時短の意味でFont Awesomeを利用するのがおすすめです。
SVGにしたら良いやん的な話は、また今度。
Font Awesomeの使い方。
では早速使ってみましょうー。
まず.cssファイルに@インポートを使ってCSSを読み込みます。
|
1 |
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); |
@インポートは.cssファイルの最上部に記載してくださいね。
準備はこれだけです。
Font Awesomeにアクセスして、上部のiconsをクリックします。
ここにFont Awesomeで使えるアイコンが表示されていますので、好きなアイコンを選んでください。
ここでは試しにYouTubeを選んでみます。
記述方法は2種類。
大きく分けて2種類の方法があります。
どちらもメリットとデメリットありますので、よく確認してから使いましょう。
方法1：<i>タグで使う。
フォントをイタリックにするタグ、<i>を使って表示することができます。
こちらは簡単に使えますが、.htmlファイルに直接表記するのでファイルの見栄えが悪くなるのと、CSSで<i>に何か指定していたらそれが適用されてしまいます。
この方法は多くの場所に同じアイコンを使う場合は不向きですが、例えば固定されたヘッダーのみでしか使わないなど、使用頻度が低いところに使うにはこの方法がおすすめです。
|
1 |
<a href="https://www.youtube.com/">YouTube <i class="fa fa-youtube" aria-hidden="true"></i></a> |
方法2：CSSで疑似要素に使う。
複数の場所に同じアイコンを使うときはこの方法がおすすめです。
CSSでbeforeやafterに定義して、そこに使います。
これはhrefという属性にyoutube.comという文言を含む場合にYouTubeのアイコンを表示させます。
|
1 2 3 4 |
a[href*="youtube.com"]:after { font-family:"FontAwesome"; content:"\f167"; } |
なお、contentに使用するときはUnicodeを使います。
YouTubeならf167ですね。
先頭にバックスラッシュ(\)を忘れないようにー。
サイズを変えたり色を変えたりも簡単に。
Font Awesomeはフォントなので、テキストに使える属性でデザインも簡単にできます。
色を変える、サイズを変えるなど、CSSで指定してあげれば適用されます。
|
1 2 3 4 5 6 |
a[href*="youtube.com"]:after { font-family:"FontAwesome"; content:"\f167"; font-size:125%; /* フォントサイズを125%に。 */ color:#000000; /* 色を黒色に。 */ } |
さいごに。
Font Awesomeは様々な方法でアイコンフォントを使えるサービスです。
自作の画像のようにオリジナリティはありませんが、リンクなどにアクセントを付けたい場合やウェブアプリのアイコンなど様々な用途に使えるので、選択肢として覚えておいても損はありませんよー。
コメント