Awesome(フォントオーサム)はアイコンフォントの定番サービスです。Webサイトのインターフェースで使用したいアイコンがほとんど網羅されています。Awesomeを使っていてハマりやすいポイントをまとめてみました。いざ使ってみたけどアイコンが表示されないといったときの参考になれば幸いです。Awesomeの本体がインクルードしないとアイコンは使用できません。Awesomeの読み込み文が記述されているか、そのファイルパスにちゃんとリンクできるか確認しましょう。href="https://xxx/css/font-awesome.min.css">contentに「\」がないbefore/after疑似要素のスタイルシート上でアイコンを設定する場合、contentに表示したいアイコンのidを設定します。このとき、idの前に「\」が必要になります。公式サイトからコピペするとうっかり書き忘れてしまうこともあるので注意しましょう。Awesomeのバージョンによって、スタイルシート上での記述方法が変わります。使用しているバージョンに合わせた記述になっているか確認しましょう。bold」の指定がない(バージョン5以降)バージョン5以降、before/after疑似要素にアイコンを表示する際、「font-weight」の指定が必要です。バージョン4のスタイルシートを使いまわしたときには注意が必要です。Awesomeは、日々アイコンが追加・更新されています。同じバージョン5の中でも5.10.0と5.14.0では使えるアイコンに差分が生じます。公式サイトのアイコン画面で、そのアイコンが追加された詳細のバージョンが確認できます。読み込み中のバージョンより新しいアイコンを使っていないか確認してみましょう。Awesomeを使っていないと表示できません。ご質問など受け付けています記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。お問い合わせクリップボードにコピーしました当サイトについて。