概要

AWS の記事を見ていたらロゴアイコンが Facebook, LINE, Twitter のシェアするボタンを作ってみたの時に確認した規約にしたがっていないことに気づいた。
これは何か他の方法をとっていると考え、コードを見てみた事がきっかけ。

Amazon Web Services ブログ より

検証モードで確認してみると

となっており、 CSS は下記のようになっていました。

[class*=" icon-"], [class^=icon-] {
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0;
    font-family: FontAwesome!important;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    margin-right: 0.3em;
}

font-family の適用をオフにしたところアイコンが表示されなくなったのでこれか！と。

Font Awesome

https://fontawesome.com

Font Awesome とは

Webアイコンフォントの1種。アイコンを画像として挿入するのとは違い、文字列と同様に扱うことが可能。
CSS のみでデザインを変更できることや、画像を使用しないことでページ読み込み時の負荷を軽減することができるなどの利点がある。

料金について

UPDATED: JULY 12, 2018

Font Awesome Free License

Font Awesome Free is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

Free License - Font Awesome より引用

<script src="https://kit.fontawesome.com/<ユーザーID>.js" crossorigin="anonymous"></script>

<script src="https://kit.fontawesome.com/<ユーザーID>.js" crossorigin="anonymous"></script>

<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter" style="color: #61177c;"></i>
<i class="fa-brands fa-twitter fa-beat-fade" style="color: #61177c;"></i>