擬似要素のfontawesomeが表示されない時に確認すること

擬似要素のfontawesomeが表示されない時に確認すること

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

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

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

サラッと導入できるけど意外とハマる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アイコン
}

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

まだまだ落とし穴はありそうだけど

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

こちらの記事も読まれています

Windowsでgulpのバージョンアップを簡単に!nodistを使ったおすすめ管理方法を紹介!... こんばんは。taisonです。 前回記事でPCリフレッシュをしてnode.jsが消えた!っというお話をしました。 Windows8.1にgit for Windowsを導入してgithubに爪痕を残す   gitに続き、node.jsの復旧をしようとしたのですが、せっかくだ...
Windows8.1にgit for Windowsを導入してgithubに爪痕を残す... こんばんはtaisonです。 先日PCの調子が悪くなりまして、どうにもこうにも動かなくなったもんだから、 「そろそろリフレッシュするかぁ」 と、安易にパソコンのリフレッシュをしました。するとどうでしょう。 gitやらnode.jsやら綺麗さっぱり消えてるではありませんか! ...
ついに発売!iPhone X web制作への影響について調べてみる... きたる11月3日に発売されるiphone x。 発売前から色々と話題になってますが、とりわけIT、web関連の方々はザワザワしてるんじゃないでしょうか? なぜならiphone x。ディスプレイの形が変わり、web制作やアプリ制作にだいぶ影響が出るんじゃないの?という話が出ているからです。 かつて...
gulp-ejsとjsonファイルを使って更新データの管理を楽にする方法... 本格的な梅雨時期に入ったようで、本日もうなるような大雨ですね。 私の事務所は入り口がくぼんだような地面になっているので、往来する時は池に飛び込むような仕様になっております。 さて今回の題材はタイトルのとおり。 皆さん公開したサイトデータの中でちょくちょく更新する必要があるデータを扱う時があ...

制作に役立つカテゴリの最新記事