FontAwesomeの罠
Webで簡単なアイコンを表現するときに使えるFontAwesome（ふぉんとおーさむ）。
しかし、とあるパターンの時にうまく表示できないという罠がありました。
実は3か月前にも同じ罠にはまっていたので、
「学べよっ！ いい加減っ！」
ということで、記事にします。
たまには技術系のことも書いて、SE感アピール。
どうも、福井のシステムエンジニア、小倉です。
FontAwesomeってなんぞ？
Webをする人には、とてもメジャーなアイコンを表現するフォントです。
無料で1500種類のアイコンフォントが使えます。
有償版（Pro版）は年額$60なので、現在110.42円なので6625.41円ですね。月換算で552.1175円。
5082種類のアイコンが使え、サポートが受けられるようになります。
とはいえ、1500種類でも十分です。
カートアイコン、メールアイコン、矢印アイコンなど汎用性の高いものがそろっています。
導入簡単
本系サイトを見ればわかるんですが、
HEADタグ内に
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
これを入れるだけです。
SVG版やPRO版は本家サイトから引っ張ってきてください。
実際に使う場合には
<i class="fas fa-igloo"></i>
のようにclassに「fas」をつけて、あとはアイコンの種類を指定すれば設置できます。
※fasはSolid（無料）、farはRegular（Pro）、falはLight(Pro)、fabはBrands（無料）と、スタイルの種類によって変わります。大体はfas使っておけばOK.
バージョン5より前ではfaを使っていましたが、2019年2月現在の最新バージョン5.7.1では使いません。
今の本家には、コードが載っていますので、コピペをするだけなので簡単です。
ハマる人は、違うやり方で使う場合にハマる
上記のような使い方をしていればハマることはないのですが、実は違う使い方ができるんです。
CSSで疑似クラスを使うような場合
<span class="test"></span>
.test::before{
content: "\f101";
font-family:"Font Awesome 5 Free";
}
といった形で使います。contentのところには頭に「\」円マーク＋アイコンページのコードを付けます。
font-familyには、使うものによって変わりますが、Font Awesome 5 Freeを指定しておけば大体OKです。（無料のアイコンを使うなら）
で、ここで問題が起きる
なぜかうまいことを表示できずに
ということが起きます。
「なぜだああああああ」
といろいろと調べてみると、文字の太さがある程度必要らしく
font-weight:900にしてあげないといけないようです。
.test::before{
content: "\f101";
font-family:"Font Awesome 5 Free";
font-weight: 900;
}
※font-weight:boldでもOKです。
※バージョンによっては、700だったりもします。
本家をよく見ると・・・
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
書いてあった。
さらにfasを↑のように置き換えてる本家のソースコードを見てみても、
書いてあった。
これをやれば無事に表示できます。
便利なものには、ちょっとした落とし穴があります。
「あれれ～？、このFont Awesome出ないよ～？」（某名探偵KNN風）
となった時には、このあたりも確認してみましょう！
0コメント