Font Awesomeのアイコンを擬似要素で使用する

ボタンに、ラベルに、使い勝手の良いFont Awesomeのアイコン！
このアイコンを擬似要素で使うことが多いので、使い方の方法をまとめてみました。
今回はボタンにアイコンをつける方法を紹介します。

下準備　Font Awesomeのキットをheadに入れる

Font Awesomeは「キット」と呼ばれるコードをhead内部に入れることで使用可能です。
無料会員登録をして、キットを入手しましょう。

ログイン後、「Your Kits」をクリックします。

使いたいキットをクリックし「Easy Installation」のコードをコピーしましょう。
キットのコードは<script src="https://kit.fontawesome.com/あなたのキットID.js" crossorigin="anonymous"></script>です。

キットのコードをheadに貼り付けたら準備完了です！

アイコンを使うための場所を作る

今回はボタンを作ります。

    <a href="#" class="c-button1">詳しくはこちら</a>

      .c-button1 {
        width: 260px;
        border-radius: 150px;
        display: inline-block;
        background-color: orange;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 0;
        text-decoration: none;
      }

使いたいアイコンを探す

Font Awesomeで、使いたいアイコンを探してユニコードをコピーします。
今回はボタンの右側に配置する矢印が欲しかったので、以下のアイコン（ユニコード：f054）を使用します。
ユニコードをコピーしておきましょう。

擬似要素を設置する準備

.c-button1のうしろ、afterにアイコンをつけるために準備をします。
この記述をしても、見た目に変化はありません。

      .c-button1 {
        width: 260px;
        border-radius: 150px;
        display: inline-block;
        background-color: orange;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 0;
        text-decoration: none;
        position: relative;
      }
      .c-button1:after {
        content: "";
        position: absolute;
      }

アイコンを設置

.c-button1:afterのcontent: "";に、コピーしたユニコードを入れます。
その下に、今回使うアイコンの種類（無料版なので--fa-font-solid）を指定します。

さらに、アイコンの位置調整のためにtopとleftに関する記述を足しました。

      .c-button1 {
        width: 260px;
        border-radius: 150px;
        display: inline-block;
        background-color: orange;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 0;
        text-decoration: none;
        position: relative;
      }
      .c-button1:after {
        font: var(--fa-font-solid);
        content: "\f054";
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
      }

おまけ：左側にもアイコンをつける

擬似要素のbeforeを使うと、左側にもアイコンをつけられます。

      .c-button1 {
        width: 260px;
        border-radius: 150px;
        display: inline-block;
        background-color: orange;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 0;
        text-decoration: none;
        position: relative;
      }
      .c-button1:after {
        font: var(--fa-font-solid);
        content: "\f054";
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
      }
      .c-button1:before {
        font: var(--fa-font-solid);
        content: "\f3c5";
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
      }