Font Awesomeの一部のソーシャルアイコンが表示されない

Font Awesomeのソーシャルアイコンをいくつかhtmlに羅列してブラウザで確認してみたところ、githubのアイコンは表示されるのに、twitterとinstagramのアイコンは表示されないという現象に遭遇しました。

## 原因

広告ブロックの拡張機能を有効化したブラウザで閲覧しているため。

Adblock Plusなどの広告ブロック拡張でよく使われているフィルタリスト[Fanboy's Social Blocking List](https://easylist-downloads.adblockplus.org/fanboy-social.txt)に、Font Awesomeのソーシャルアイコンも登録されているため、拡張機能でこのリストを利用するように設定している場合、アイコンが表示されません。もちろんiOSでコンテンツブロッカーアプリを入れている場合も同じことが起こり得ます。

## ブロックされるアイコン

ブロッキングリスト見た感じこれだけある。[^filtering]

[^filtering]: 2015/11/01現在

- <i class="fa fa-facebook"></i> fa-facebook 
- <i class="fa fa-facebook-square"></i> fa-facebook-square 
- <i class="fa fa-flickr"></i> fa-flickr 
- <i class="fa fa-google"></i> fa-google 
- <i class="fa fa-google-plus"></i> fa-google-plus 
- <i class="fa fa-google-plus-square"></i> fa-google-plus-square 
- <i class="fa fa-instagram"></i> fa-instagram 
- <i class="fa fa-linkedin"></i> fa-linkedin 
- <i class="fa fa-linkedin-square"></i> fa-linkedin-square 
- <i class="fa fa-pinterest"></i> fa-pinterest 
- <i class="fa fa-pinterest-square"></i> fa-pinterest-square 
- <i class="fa fa-reddit"></i> fa-reddit 
- <i class="fa fa-reddit-square"></i> fa-reddit-square 
- <i class="fa fa-share-alt"></i> fa-share-alt 
- <i class="fa fa-share-square-o"></i> fa-share-square-o 
- <i class="fa fa-soundcloud"></i> fa-soundcloud 
- <i class="fa fa-tumblr"></i> fa-tumblr 
- <i class="fa fa-tumblr-square"></i> fa-tumblr-square 
- <i class="fa fa-twitter"></i> fa-twitter 
- <i class="fa fa-twitter-square"></i> fa-twitter-square 
- <i class="fa fa-vine"></i> fa-vine 
- <i class="fa fa-youtube"></i> fa-youtube 
- <i class="fa fa-youtube-play"></i> fa-youtube-play 
- <i class="fa fa-youtube-square"></i> fa-youtube-square 

上記のリストは左端にFont Awesomeのアイコンを表示するようにしています。Qiitaが`font-awesome.min.css`を読み込んでいるため、そのまま表示することができています。もし表示されていない場合、広告ブロックの拡張機能によって削除されている可能性があります。

## 回避策

広告ブロック利用者が自分の意思でFont Awesomeのソーシャルアイコンを消したいと思っているなら仕方がないと思います。しかし、プロフィールページにSNSへのリンクを貼りたいとかで使ってるような場合までブロックされるのはちょっと辛いですね。

Fanboy's Social Blocking Listは、class名でフィルタリングしているようなので、Font Awesomeで使われいるclass名を再定義してあげれば表示できるようになります。

### sassの場合[^sass]

sassでFont Awesomeを利用する場合、Font Awesomeのデフォルトclass名プレフィックス`fa`を変更することができます。

[^sass]: lessもだいたい同じ

なのでFont Awesomeのsassを読み込む前に、プレフィックスの変数`$fa-css-prefix`に`fa`以外の別名を定義してあげるのが一番簡単です。

```scss
$fa-css-prefix: "your-fa";

@import "font-awesome";
```

使い方

```html
<i class="your-fa your-fa-twitter"></i> 
<i class="your-fa your-fa-facebook"></i> 
```

### cssの場合

cssの場合は、使うアイコンだけ別名のclassを定義してあげます。`font-awesome.css`を直接編集すると、更新があった時マージするのが面倒になるので、自分で作成した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](https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/css/font-awesome.css)

使い方

```html
<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](https://github.com/FortAwesome/Font-Awesome/issues/1799)
- [Font Awesome Icons - Brand Icons](https://fortawesome.github.io/Font-Awesome/icons/#brand)
- [fontawesome ublock adblock workaround](https://gist.github.com/jarv/ec34057d8e8138c8b921)