Zenn
🦔

Font Awesomeを使ってSNSのiconを表示する

2020/11/22に公開
CSS
HTML
Font Awesome
#
アイコン
#
sns
tech

Font Awesomeとは

web serviceのlogin機能としてSNS認証を実装する際、多くの場合SNSのicon表示を行うことと思います。Font AwesomeはこのSNSのicon表示を提供してくれるserviceです。
https://fontawesome.com/
ちなみにFont AwesomeそのものはSNSを含めた様々なiconを利用できる課金serviceですが、free planだけでもSNSのiconが利用できるので、費用を掛けずにweb serviceを構築する時に役立ちます。
利用方法はHTMLにおいてFont Awesomeが指定するJavaScriptをloadし、iconごとに準備されたCSSのclassを指定します。

環境

Font Awesome: 5.15.1 (latest as of Nov/2020)
Safari: 13.1.1 (15609.2.9.1.2)

Font Awesomeをfree planで利用登録する

Font Awesomeではfree planにおいてもmail addressによる利用登録が必要となります。以下に執筆時点(2020/11)の手順を説明します。

Top PageからStart for Freeをclickします。

mail addressを入力しSend Kit Codeをclickします。

しばらくすると入力したmail address宛にmailが届きます。mailのlinkからKit Codeと呼ばれる自身が利用するJavaScriptのlinkを取得します。
表示されたKit Name(以下の例では272a1c6b44)をclickします。

HTMLへの埋め込みlinkはCopy Kit Codeで取得できます。

利用するiconを検索しclass属性を取得する

利用したいiconを検索します。以下の例ではTop pageの検索窓からgoogleを入力し検索した結果です。

検索結果には課金planのiconも含まれますので、左のside barからfreeにcheckを入れるとfree planで利用できるものにのみ絞り込みできます。

以下は検索結果の左上のiconをclickしたものです。iconの形などを変更せずに使う場合はStart Using This Iconをclickします。

表示されたlinkをcopyします。

この要領で必要なiconの属性を取得します。TwitterとFacebookの場合は以下のとおりです。
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>

自身のweb serviceにiconを埋め込む

取得したlinkをiconを実際のHTMLに埋め込みます。埋め込みは<!-- FontAwesome Here! -->の次の行です。

index.html
<!DOCTYPE html>
<html>
    <head>

        <!-- Bootstrap -->
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="signin.css">
        <!-- FontAwesome Here! -->
        <script src="https://kit.fontawesome.com/272a1c6b44.js" crossorigin="anonymous"></script>

    </head>
    <body>
        <div class="container">
            <div class="form-signin">
            <button class="google sns-btn" onclick="window.location='/login/google';">
                <!-- FontAwesome Here! -->
                <i class="fab fa-google"></i> Login with Google
            </button>
            <button class="twitter sns-btn" onclick="window.location='/login/twitter';">
                <!-- FontAwesome Here! -->
                <i class="fab fa-twitter"></i> Login with Twitter
            </button>
            <button class="fb sns-btn" onclick="window.location='/login/google';">
                <!-- FontAwesome Here! -->
                <i class="fab fa-facebook-f"></i> Login with Twitter
            </button>
            </div>
        </div>
    
        <!-- Bootstrap -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>
signin.css
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.sns-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none;
}

.sns-btn:hover {
  opacity: 1;
}

.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}

表示結果は以下のとおりです。

Discussion