Font Awesome5が擬似要素で反映されない

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

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

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

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

Font Awesomeをアイコンに使うときなどは、CSSの疑似要素「:before」で置くのが定番かと思いますが、最新版のFont Awesome5を疑似要素で使ってみると…

「ログイン画面へ戻る」の前がtofuこと四角い文字化けになってます。
疑似要素でFont Awesomeを使うにはbeforeの中にfont-familyでFont Awesomeを指定しないといけないんですね。


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


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


やっと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にはワッフルのアイコンもありますが、どこで使うのでしょう…

高田馬場さんぽ 〜落合中央公園編〜

こんにちは。白井です。

今回は久しぶりに高田馬場・下落合エリアののんびりできるスポットをご紹介しようかと思います。
今回ご紹介するのは「落合中央公園」。弊社事務所からはゆっくり歩いて15分ほどの距離になります。
ちなみに公園の一番奥には…


このような白くて美しい花がたくさん植えられているんです。

公園の場所は下落合駅近くの神田川沿い。川のそばにあるたかーい階段を登ると…



非常に広い公園が見えます。


キャッチボールや子ども野球ができるくらいの広場に、遊具エリア・テニス場・サッカー場が併設されています。
ところで、なぜこちらの公園をご紹介したかといいますと、一番最初にご紹介した白い花にあります。
桃のような甘い香りを辺りに漂わせるこの花は「クチナシ」。この季節に咲く花で、その実などから抽出された色素は「クチナシ色素(カロテノイド色素)」という名でお菓子や麺などを着色するために使われているそうです。

先日そばについての記事を書かせていただきましたが、そういえば一部のそばを含む黄色い麺類の中にはこのクチナシ色素で色付けされたものもあるそうです。(先日いただいたそばはそば本来の色でしたが)
ここのところ食事に関する記事が多かったため、今回も「食べられるもの」つながりで(？)こちらをご紹介しました。

ちなみにクチナシは色素として有効利用されているだけではありません。リラックス効果があるというこの香りにはファンも多く、シャネルなどの高級ブランドから香水も出ているそうです。
みなさんもぜひクチナシの花を探して、その香りを楽しんでみてください。