WEBフォントを使って、どんなデバイスでも綺麗にアイコンを表示！？レスポンシブで使える！
最近はずっとレスポンシブについて書いていますね。
レスポンシブサイトの基本設定！？メディアクエリでブレイクポイントを作って簡単スマホ対応！ - misallychan.comwww.misallychan.com
レスポンシブで%指定したいけど…３分割は割り切れない問題を解決するclac()！！ - misallychan.comwww.misallychan.com
レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの？【PCとスマホで改行位置や画像を切替える方法】 - misallychan.comwww.misallychan.com
レスポンシブでも使える！「clearfix」と「box-sizing」style.cssやcommon.css、reset.cssやnormalize.cssなどに追加したい初期設定 - misallychan.comwww.misallychan.com
今回ご紹介するのはアイコンのWEBフォントです！！
わざわざ画像でアイコンを作らなくても、WEBフォントなら管理も楽ちん！
しかも大きさも気にしなくて良いので、レスポンシブデザインにも最適です。
なぜアイコンにはpng画像ではなくWEBフォントがおすすめなの？
Retinaディスプレイなどで、png画像がつぶれる
最近のスマホはほぼRetinaディスプレイ。
高解像度で非常に綺麗なのが特徴です。
しかし…皆様体験したことないでしょうか？
例えば60pxで表示させるために、60pxの画像を用意して表示させると、画像がボヤけてしまいます…。
アンチエイリアスのかかっていない状態といいますか…もっと綺麗な画像なのに！となってしまうのです…。
png画像のボケは、2倍サイズを作れば解決できるけど…
そこで！代わりに、2倍で120pxの画像を用意して、60pxとして表示させると…
なんということでしょう。綺麗に表示されました。
ただ。
毎回2倍サイズで作成していたら、軽くできる画像も重くなってしまいますね。
レスポンシブで大きさをディスプレイによって変えると、結局png画像がぼやける
しかも、レスポンシブで画像の大きさを％指定していて、大きさがディスプレイによって変わるなら…
結局どのサイズを用意していいか迷ってしまいます。
画像が増えると、読み込み速度が落ちる
それに、スマホ対応の際にはできるだけ画像の使用は避けたいところです。
そこで、使用したいのがWEBフォント、というわけです。
WEBフォントなら、画像ではないのでボヤけることなく、どんなデバイスでも綺麗に表示されます。
そんなWEBフォントの中にも、アイコンのデザインのものがありました。
今回ご紹介するのはこちらのアイコンが使えるWEBフォントです。
画像より綺麗、CSSで色を変えたりできる！
WEBフォントのアイコンを使えば、png画像よりも鮮明に綺麗なアイコンが表示されます！！
しかも、CSSで制御できるので、色を買えたりhoverエフェクトをかけることができます！！
今回使用するのはFontAwesome
FontAwesome5が出てからは、ページや使い方もガラッと変わってしまったようですが、相変わらず使用が簡単なことには代わりません。
全て英語表記ではありますが、検索してみると使い方もかなり詳しいものがたくさん出てくるので、それも安心です。
fontawesome.com
FontAwesomeの使い方
まずCDNを読み込みます。
CDNは楽チンですね。
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
次に、以下のページから使いたいアイコンを選びます。
fontawesome.com
検索フォームに入力が便利です！全て英語で入力してくださいね。
アイコンを選択し、詳細ページに飛んだら…
左下にある黒帯のiからはじまるタグをコピーし、表示させたいところにHTMLで貼り付けるだけ！
<i class="fas fa-heart"></i>
使用例
引用：heart | Font Awesome
こちらのハートを、例えばいいね用のアイコンとして表示させてみましょう。
タグはこちらです。
これをHTMLに組み込んでデザインしてみると…
<b><span style="color: #ff5252;border:1px solid #ff5252;padding:20px;font-size: 200%;border-radius: 30px;"><i class="fa fa-heart"></I> いいね！</span></b>
こんな感じ！
こんな表示になります！
すると…
いいね！
こんな感じで表示されちゃうわけです！
まとめ
画像を使わなくてもアイコンが表示されちゃうなんて。
しかも、色も変えれちゃうなんて。。。
最高ですね。
SNSアイコンやメニューなどにめっちゃ使えます。
このブログでもメニュー部分に使ってますよ。ぜひお試しくださいね。
