Font Awesomeのソーシャルアイコンをいくつかhtmlに羅列してブラウザで確認してみたところ、githubのアイコンは表示されるのに、twitterとinstagramのアイコンは表示されないという現象に遭遇しました。
原因
広告ブロックの拡張機能を有効化したブラウザで閲覧しているため。
Adblock Plusなどの広告ブロック拡張でよく使われているフィルタリストFanboy's Social Blocking Listに、Font Awesomeのソーシャルアイコンも登録されているため、拡張機能でこのリストを利用するように設定している場合、アイコンが表示されません。もちろんiOSでコンテンツブロッカーアプリを入れている場合も同じことが起こり得ます。
ブロックされるアイコン
ブロッキングリスト見た感じこれだけある。1
- fa-facebook
- fa-facebook-square
- fa-flickr
- fa-google
- fa-google-plus
- fa-google-plus-square
- fa-instagram
- fa-linkedin
- fa-linkedin-square
- fa-pinterest
- fa-pinterest-square
- fa-reddit
- fa-reddit-square
- fa-share-alt
- fa-share-square-o
- fa-soundcloud
- fa-tumblr
- fa-tumblr-square
- fa-twitter
- fa-twitter-square
- fa-vine
- fa-youtube
- fa-youtube-play
- fa-youtube-square
上記のリストは左端にFont Awesomeのアイコンを表示するようにしています。Qiitaがfont-awesome.min.cssを読み込んでいるため、そのまま表示することができています。もし表示されていない場合、広告ブロックの拡張機能によって削除されている可能性があります。
回避策
広告ブロック利用者が自分の意思でFont Awesomeのソーシャルアイコンを消したいと思っているなら仕方がないと思います。しかし、プロフィールページにSNSへのリンクを貼りたいとかで使ってるような場合までブロックされるのはちょっと辛いですね。
Fanboy's Social Blocking Listは、class名でフィルタリングしているようなので、Font Awesomeで使われいるclass名を再定義してあげれば表示できるようになります。
sassの場合2
sassでFont Awesomeを利用する場合、Font Awesomeのデフォルトclass名プレフィックスfaを変更することができます。
なのでFont Awesomeのsassを読み込む前に、プレフィックスの変数$fa-css-prefixにfa以外の別名を定義してあげるのが一番簡単です。
$fa-css-prefix: "your-fa";
@import "font-awesome";
使い方
<i class="your-fa your-fa-twitter"></i>
<i class="your-fa your-fa-facebook"></i>
cssの場合
cssの場合は、使うアイコンだけ別名のclassを定義してあげます。font-awesome.cssを直接編集すると、更新があった時マージするのが面倒になるので、自分で作成したcssファイルに定義するのがいいと思います。
.your-fa-twitter:before {
content: "\f099";
}
.your-fa-facebook:before {
content: "\f09a";
}
contentにあたる部分はfont-awesome.cssファイルを見て確認します。
https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/css/font-awesome.css
使い方
<i class="fa your-fa-twitter"></i>
<i class="fa your-fa-facebook"></i>
参考
- Missing Brand Icons (Adblock Plus related issue) · Issue #1799 · FortAwesome/Font-Awesome
- Font Awesome Icons - Brand Icons
- fontawesome ublock adblock workaround