Font Awesomeを使ってSNSのiconを表示する
Font Awesomeとは
web serviceのlogin機能としてSNS認証を実装する際、多くの場合SNSのicon表示を行うことと思います。Font AwesomeはこのSNSのicon表示を提供してくれるserviceです。
ちなみに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! -->の次の行です。
<!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>
.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;
}
表示結果は以下のとおりです。
Author And Source
この問題について(Font Awesomeを使ってSNSのiconを表示する), 我々は、より多くの情報をここで見つけました https://zenn.dev/morisin/articles/8a77f1c9c4d37343b749著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol