2018年06月21日

Font Awesome5が擬似要素で反映されない はてなブックマーク - Font Awesome5が擬似要素で反映されないこのエントリーをはてなブックマークに追加

こんにちは。白井です。
最近食べ物の話しか書いていないように思うので、今回は食べ物ではない話をひとつ。

Webページを作ったことがある人は知っているかもしれない「Font Awesome」。
手元の端末の中ではなくWebからフォント情報を読み込んで表示するWebフォントのひとつで、GoogleのMaterial Iconと並んで便利なアイコン特化のWebフォントです。

個人的には種類が多いのでFont Awesome派です。2つのサービスには使い分けどころがあるのでしょうか?

この使い方はさておいて、今回は「Font Awesome5がCSSの擬似要素で反映されない」話です。

Font Awesomeをアイコンに使うときなどは、CSSの疑似要素「:before」で置くのが定番かと思いますが、最新版のFont Awesome5を疑似要素で使ってみると…
contentだけ指定
「ログイン画面へ戻る」の前がtofuこと四角い文字化けになってます。
疑似要素でFont Awesomeを使うにはbeforeの中にfont-familyでFont Awesomeを指定しないといけないんですね。

contentとfont-familyを指定
まだまだtofuになってます。
実はFont Awesome5の無料版はfont-family名が「Font Awesome 5 Free」なんですね。
Font Awesome4までとは仕様が違うようです。ということで、font-familyを修正します。

contentと正しいfont-familyを指定
まだtofuになってる!!!!!!
Font Awesomeの中には定められたfont-weightを指定しないと表示されない物があるようです。
こちらのStyles&Prefixesにこっそり(?)記載されていますが、無料版でよく使う「Solid」スタイル(HTMLに埋め込むときのclass指定がfasで始まっているもの)はfont-weightを900に指定します。

contentと正しいfont-familyとfont-weightを指定
やっとtofuが消えました。

CSSで使うときはContentにHTMLタグではなくて「\4字のUnicode」を指定しなくてはならないのもなかなかハマるポイントな気がします。UnicodeはFont AwesomeのCSSまたはWebサイトの各アイコンのページに載っています。

ということで、Font Awesome5をCSSの疑似要素で使うときは
content:"\4桁のUnicode";
font-family:"Font Awesome 5 Free";
font-weight:各スタイルに定められた数字;

を指定しよう
という話でした。

Font Awesomeにはワッフルのアイコンもありますが、どこで使うのでしょう…



sakamo_knowledgeflow at 14:15コメント(0)開発・技術  この記事をクリップ!

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
i-Web Message
yhayashiにメッセージを送れます

PR広告
月別アーカイブ
最新コメント
最新トラックバック
livedoor Readerに登録
RSS
livedoor Blog(ブログ)