Font Awesome5の使い方

Font Awesome5の使い方

webのあれこれ
2018/02/11
7
vanillaice (Akira)
vanillaice (Akira)
InstructionFontAwesome

先回ちょっと間違った情報を書いてしまいましたので、改めて。
毎度のことですがweb一般情報ではなく「FC2で」「私が製作したテンプレートで」の括りがつきます。私の記事は基本的にそんな感じ (´・ω・`)

(めんどうなので今回も Font Awesome を FA と略称します)
まるで既存のFA用i要素あるいはspan要素全てが全滅のような書き方をしてしまったのですが、実際はそうではなく。
その点の補足説明なども行おうと思います。
一番気になる 既存内容の修正が必要かどうか について。

既存テンプレートに関して、今後メンテナンスあるいは修正を行う対象についてはその都度バージョン4から5へ、CSSからJSへと内容を切り替えていきます。
既に変更を行なったテンプレートは2018年2月10日現在で Alternative のみです。

先回の記事

Font Awesomeのバージョンが5になりました【重要】

Font Awesomeのバージョンが5になりました【重要】

無料アイコンサイトの雄 Font Awesome バージョンが4から5へアップすると共にサイトもレスポンシブデザインに刷新されています。 私のテンプレートでも利用させて頂いてます。ありがとうございます。 って、バージョンアップは良いんだけどさ。 どうしますか (´・ω・`) 今回はサイト説明や使用方法説明ではなく 注意を促す記事 でございます。...

Font Awesome5のプリフィックス(接頭辞)は数種類あります

prefix
英語発音は「プリィフィックス」、日本語読みは「プレフィックス」が多いのかなぁと思いますが個人的に違和感ありなので「プリフィックス」で(笑)
私「pro」を「プロ」と書くのも抵抗あるんですよね。あと「オパシティ」も (´・ω・`)
(実際の英語発音は「プロゥ」「オゥパァシティ」です)

プリフィックスというのはこういうやつです ↓
例) 各ベンダー(ブラウザメーカー)のプリフィックス

-webkit-transition: .3 ease-out;
-moz-transition: .3 ease-out;
-ms-transition: .3 ease-out;
transition: .3 ease-out;

上から「webkit系(Safari, Chromeなど)「Mozilla(Firefox)」「Microsoft」「一般(プリフィックスなし)」
と、こうして特殊条件下で有効にするために前にくっけてあるものがプリフィックス。
ここでは「条件分岐」という表現をしても良いかもしれません。
そのプリフィックスがFAにも存在します。 Font Awwesomeプリフィックス スタイル分類の SolidBrands を赤く囲いました。
無料で利用できるものはこの2種のスタイルです。
それぞれのプリフィックスは fasfab ですね。

ブランドアイコンが区別されるようになりました【書き換え必須】

これまでは有料版を除く全アイコンが fa で統一されていましたが、バージョン5からはブランドアイコンを区別するように変わりました。
Facebook とか Twitter とか Apple などの企業ロゴとかそういうの。
ここたぶん商業的な理由がありそうなんですが、バージョンアップにあたり大事なのは
プリフィックス「fab」を有するアイコンは旧書式では表示が行われない
という点です。

Facebookアイコンをサンプルに旧来のhtml内容は以下の通り。

<i class="fa fa-facebook" aria-hidden="true"></i>

本バージョンからCSSかJSか選べるようになっています(後述)が、どちらを選んでもブランドのfabに分類されるものについては表示されません。

CSSを選んだ場合
JSを選んだ場合

まぁ事情はなんとなくわからんでもない (´・ω・`)
というわけで、既存内容でブランドアイコンに相当するものについては html内容の書き直し もしくは 旧バージョンCSSファイルへのリンクを残す か選択しなければならない、ということです。
ページ表示の負荷などを考えると「書き直す」というのが一番ですが、辛いですね(笑)

ただブランドアイコンを記事内で表示しているケースというのは多くないと思います。
テンプレート製作やweb情報発信系ぐらいかな。たぶん ^^;

Solidスタイル(fasプリフィックス)については書き換えたりリンクを残さずとも表示が行われる救済措置が取られています。

CSSかJSか選べるようになりました

CSSでの場合は以下の通り。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<head></head> 内に記載。
今までと同じ感覚で使いたい方、初心者の自覚がある方 はこちらの方が良いかもしれません。
とはいえテンプレートに始めから含まれる場合は… とりま私のテンプレはCSSを 選びませんでした。
CSSを選択した場合、i要素のアイコンフォント として表示が行われます。

Javascriptの場合は以下の通り

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<head></head> 内に記載、または </body> の前でも良いと思います。
こちらがFA運営も推奨している方式です。
svg要素のベクターグラフィック として表示が行われます。

Javascriptが推奨される理由

理由詳細は上の方に掲載したブログカードのリンク先でご確認ください。
defer属性 というのが付いてますね。これが付いている外部リンクのJSファイルは、htmlが読み込まれた「後」にしか処理を行いません。
つまりページのレンダリングが終わってから動作します。
asyncと似ていますが、deferと違ってasyncの方は「レンダリングが終わってから」を担保するものではありません。
優先処理は避けますがレンダリング中に実行されることもあります。
asyncは読み込み順を遵守しませんがdeferは読み込み順序を守ります。

で、head内でもbody直前でもどっちでも良いんちゃう?
と書きましたが、アイコンはページの主役にはなり得ませんので別に一番最後でも良いような気がしますよね。
body前に書くならdeferの意味無くね?とも思うが(笑)
よくわからんち という方は素直にhead内に書いておけば良いと思います。

deferがつくことによる表示の特徴

レンダリングが終わってから実行するよ、ということで、FAアイコンがファーストビュー内にある場合には少し気になる挙動になると思います。
そこになかったものが急にパッと現れるというか。
これは「レンダリング後動作」にはついて回る挙動ですが、気になる人には気になるだろうなぁ、と。
その場合にはJSでなくCSSを採用すると良いですね。ページ全体のパフォーマンスが若干落ちるとしても。

疑似要素の場合はほぼ100%書き直し

非常に残念なお知らせですけどもね (´・ω・`)
疑似要素を記事内で利用している方が居るかどうかわかりませんが、少数派だとしても居るには居る。
ここにお越し頂くイツメン数名の方なんかは絶対やってる(笑)

疑似要素を利用するにはもう一つJSが必要です

外部JSファイルへのリンクではなくインラインスクリプトです。

<script>window.FontAwesomeConfig={searchPseudoElements:true}</script>

上記内容をFAのメインJSの「前」に書かないと疑似要素、つまりユニコードでの利用ができませんので注意。
そして CSSでは使えない と思います (´・ω・`)
バージョンを5に上げて、なおかつ疑似要素での利用をしたい場合にはJS一択ってことになるのかしら。たぶん。
やっぱりこれまでの「誰もが簡単に使える」というコンセプトではなくなったように思います。
以前はユニコードの疑似要素だとしても誰かがコピペ一発コードをくれさえすれば全く理解できていなくても掲載できましたよね。
今後はCSSとJSの選択がスタート地点ですし「理解」や「コツ」が必要になったのかなぁという印象。

実際にテストしてみましょう

サンプルコードを掲載しながらテスト。
ただ私まだバージョン上げてませんので、表示サンプルはスクリーンショット掲載になります。

基本形

文章の前に擬似要素アイコン表示 疑似要素利用のためのJS + メインJSがきちんと設置されている状態を前提に。

<span class="test">文章の前にアイコンを入れてみる</span>
.test {
  content: "\f004";
  display: none;
  font-family: 'Font Awesome 5 Solid';
}

display: none が必要です。
でないとこうなります ↓ アイコンの前に豆腐 ハートアイコンの前に豆腐。
これを消すために display: none

アイコンに色をつけたりサイズを変更する

アイコンのサイズと色変更 これまでの感覚ですとCSS内容の font-faimily の下に color: red; みたいな。
今後は疑似要素で指定できるのは content(ユニコードを記載), display, font-family の3つに限定されるかと思います。
まだしっかり調べてませんが、恐らく合ってる。

じゃあ色指定やサイズ指定はどこでしたらええねん (;`ー´)o

.test .svg-inline--fa {
  font-size: 30px;
  color: red;
}

こうして別途CSS内容が必要になります。
.test がsvg変換後の親要素になりますので、子要素として .svg-inline--fa を親子関係で指定。
.svg-inline--fa はFAがsvg表示される時の共通クラスです。
固有クラスであれば .fa-heart で記載。
固有にしなければいけない場合というのは、同一要素にbeforeだけでなくafter疑似要素が使われており、その両者に異なる装飾を与える場合ですとか、spanの中にもアイコンが設けられている場合です。
まぁそこはパターンがいくつもありますのでその都度入れ子関係を考えるしかありません。
ですから疑似要素の記述は「疑似要素を使うという宣言」だけに利用する、という感じでしょうかね。

font-familyに記す「スタイル」にも気をつける

ここまでのサンプルの「ハート」はスタイル分類が「Solid」ですが、先に記したようにブランドアイコンなどは「Brands」です。 font family名 brands

.test:before {
  content: "\f39e";
  font-family: 'Font Awesome 5 Brands';
  display: none;
}

まとめ

とりあえず記事内で使っているとすればこんなところかな、と思います。
もっと複雑なことをやっていて、今後のテンプレート内FAのバージョンアップで記事内容に問題が生じたという場合には個別にご相談ください。
私のテンプレートに無関係な場合は自分でやってね? (´・ω・`)

Related post

Comments  7

hige
2018/02/11 (Sun) 16:33

No title

こんな解説がありがたい。
大格闘の結果もあり、なんとか使えるようになりました。

-
2018/02/11 (Sun) 18:49

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/02/12 (Mon) 13:26

To FAの件 内緒さん

こんにちは ( ゚Д゚)ノ

そうですね。今すぐどうこうというものでもありませんので、優先順位としては後回しで良いと思います。
と言っても古いバージョンは早めに切り替えるのが一番ですけどね。それは私の方でなんとか頑張る ^^;

vanillaice (Akira)
Akira
2018/02/12 (Mon) 13:30

To higeさん

それは安心しました。大変でしたね ^^;
去年既に有料版が登場して、その内容を見た時に少し不安になったんだけども。
的中した((((笑)

-
2018/09/11 (Tue) 18:52

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2018/09/11 (Tue) 21:13

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/09/12 (Wed) 00:18

To Font Awesomeの件 内緒さん

こんばんは。了解です (o'ω')ノ

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)