Font Awesomeを使用して項目横にアイコンを簡単に表示する

スーパー便利なFont Awesome。これを使いだしてから、アイコンを画像で作成するなんてことはなくなりました。CDNで読み込んで表示するのでサイトの読み込みスピードも格段に速くなります。しかも設置も超簡単でオススメです。

DEMO

タイトル項目横にFont Awesomeでアイコンを表示する

こんな感じに、RSSなアイコンを入れてみました。

適用手順

まずは、Font AwesomeよりCDNでfont awesomeを読み込む。

HTMLは何でもいいけど、アイコンを付けたい箇所にクラス名を入れる

<h2 class="icon">アイコンを付けたい項目名</h2>

スタイルシートは以下のようになります。

<style type="text/css">
.icon::before {
    font-family: "Font Awesome 5 Free";
    content: "\f143";
    font-weight: 900;
    padding-right: .5em;
    font-size: 18px;
    color: #ff822b;
}
</style>

font-familyは必ずFontAwesomeを指定してください。
contentの部分でアイコンの種類を変更します。
アイコンの種類は、Font Awesomeチャートシートを確認してください。
ちなみに、チャートシートでは指定するUnicodeが

&#xf143;

のように書かれていますが、CSSに記述するのは、

&#x

これを

に変更したものを記入してください。
また、font-sizeやcolor、font-weightは好みに変更できます。