11
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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-prefixfa以外の別名を定義してあげるのが一番簡単です。

$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> 

参考


  1. 2015/11/01現在 

  2. lessもだいたい同じ 

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
11
Help us understand the problem. What are the problem?