画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編:フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編:Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
![WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b8453f8c0d5052f1a4abb865eae147cb2a6581ba/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F08%2Fbdcd9f9b02cb0c3322548024a2979ca2.png)