擬似要素のfontawesomeが表示されない時に確認すること │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。

皆さんもうゴールデンウィークに入った頃でしょうか？

私も休みに入り、色々とやりたいことや消化したい事をこなしたい衝動に駆られております、、、！
楽しい連休にしたいですね、、、！

さて、話を戻しまして今日はアイコンフォントでおなじみのfont-awesomeについて。

サラッと導入できるけど意外とハマるfont-awesome

実務でもよく使う(つーか実務でしか使ってない)アイコンフォント。
手軽で調整も楽なので非常に重宝してるんですが、設置したのに表示が文字列(四角いマーク)になっちゃってる場合がたまにあります。
(導入したテーマがしょっぱなからバグってる時もあります)

そんな状況に陥る原因を、凡ミス(記法ミス)ふまえて備忘録がてら列記してみようと思います。

font-familyの設定を忘れてる

使い始めの時にやりました汗
そもそも使う前にちゃんと調べとけって話ですね。
font-awesomeを指定する前に必ず入れときましょう。


.awesome{
	font-family: FontAwesome; //フォント指定する
}

ユニコードの書き方を間違えてる

これも使い始めの時にやっちゃったんですが、font-awesomeの公式サイトでユニコード(f222みたいなやつ)をコピペすると起こります。
というのもcssでcontent指定する場合、ユニコードの頭に／を入れないと認識してくれないんです。
なのでこの場合は頭に／を入れたら解決します。


.awesome{
	font-family: FontAwesome;
	content: "\f2cd"; //　\を頭の部分に入れる
}

使いたいアイコンが読み込んでいるfontawesomeに入っていない

これはテーマなどで初期読み込みになってるfont-awesomeのバージョンに、使いたいアイコンが入ってない場合に起こります。
これはwp-head直下でfont-awesomeをCDNで読み直してしまえば解決します。
対応してるバージョンにしてね。


<link type="stylesheet" rel="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

広告と間違えられてブロックされてる ※擬似要素じゃないアイコン使用の場合

結構特殊なパターン。
これはブランドアイコンをi要素で埋め込む場合が対象になります。
ブラウザの広告ブロック機能がなぜかアイコンを広告とみなして排除しちゃうんですよね。
対策方法として自作cssでアイコン表示するクラスを作っちゃうってのがあります。


.your-icons:before{
	content: "\f270"; //amazonアイコン
}

これで表示させたい要素にクラス付与してあげれば表示します。

ひとまず自分が遭遇した内容をあげてみました。
しかし数あるバージョンやブラウザの多様化で、意図しないハマり所はこれからも出てきそうな予感、、、！
がんばって対応しましょう。