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

無料アイコンサイトの雄 Font Awesome
バージョンが4から5へアップすると共にサイトもレスポンシブデザインに刷新されています。
私のテンプレートでも利用させて頂いてます。ありがとうございます。

って、バージョンアップは良いんだけどさ。
どうしますか (´・ω・`)
今回はサイト説明や使用方法説明ではなく 注意を促す記事 でございます。

ごめんなさい。ワタクシとんでもない嘘を書いてしまいました。
疑似要素・特殊な装飾が絡んだもの及び ブランドアイコン(SNS各社など) 以外は旧コードでもちゃんとSVGに変換して表示してくれます。
お詫び申し上げます。

Font Awesome

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

変わってしまった「クラス名」

既存テンプレートに含めているFont Awesome(以下めんどくさいので FA と称す)はバージョン4です。
テンプレート内にリンクがありますので、みなさんが記事を書く際にも利用できます。実際にお使いになられている方もいらっしゃるのではないでしょうか。

ところがさー。クラス名が変わっちゃった んですねコレ (´・ω・`)
例えばFacebookアイコン。以下は説明の便宜上「画像」で掲載します。そして装飾については別途CSS指定が必要ですけれどもとりあえずサンプルとして。

これまでの内容は以下の通り。

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

でもって、新バージョンは以下の通り。

<i class="fab fa-facebook-f"></i>

うぇwマジかw
思わず普段使わない草も飛び出すってもんです。
クラス名の識別が変わったわけですから 全く別の物になった ということです。つまり、
バージョンを新しくしてしまうと(新バージョンへのリンクに変更すると)、既存のアイコンが表示されなくなる
ことを意味します。

記事内で利用したこと無いよ (`▽´) という方はセーフです。セーフ
ガッツリ使ってる、という方は…… どうしようねぇ (´・ω・`)

推奨の利用法も変わりました

これまでは「CSSリンク」としての提供でした。それは本バージョンでも同じように準備されていますが、新たに追加された使用法があります。
SVGとJSで非同期で読み込んだらええよ
ってやつ。

……… (´-ε-`;)
これたぶん多くの方がずっと思ってたと思うんです。
「何故にCSS・何故asyncさせない・何故にbootstrapやねん」ってのを(笑)
それが実現されたわけなんですが… や、これは良いことなんですよ?良いことだけれども!!
うーん、ちょっとその前にいろいろ説明しますね。

これまでFAを使うにはテンプレートのhead情報内に

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/バージョン/css/font-awesome.min.css">

こんなして入ってたんですね。で、ご覧の通りこれはCSSのリンクです。
これまでと同じようにバージョンの部位を変更し

<link rel="stylesheet" href="https://use.fontawesome.com/releases/バージョン/css/all.css">

こんな風に多少変更はありますが、同じ感覚で利用することは可能です。
但し既に書いたように、クラス名が変わったのですから4までの書式では表示が行われなくなります。

外部CSSというのは レンダリングブロック 要因なんですね。
htmlの解釈・描画を遅らせる原因となります。
同じくJS(Javascript)もレンダリングブロック要因ではあるのですが、CSSのリンクと違って必ずしもhead情報内に書かなくてはいけないというわけではありません。
ですから大抵は </body> の直前、つまりhtml内容を解釈した後で処理するように後回しします。
でもCSSリンクというのはhead情報内に記す決まりなのでそれができないわけだ。

実際スピードテストなんかを行うと、Googleにしろ第三サービスにしろ、「このFAのリンクどうにかならんの?」と注意されます。
どうにもなんねーよ(これまでは)
ちょっと気の利くデザイナーなんかはJS使ってFAを後回し(link要素を後からheadに追加)ってことをやってます。
私のテンプレートにも一部該当しているものがありますよ。

その「後回し」が推奨されるようになったみたい (´・ω・`)
それはそれで良いんですけどね。みんなそうしたかったに違いないですし(笑)

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

今後は上記スクリプトをbody直前に書けば良いよ、と。そゆことよね (´・ω・`)
こうすると動的にSVGで表示を行なってくれます。そしてdefer付いてますので非同期読み込みで高速化、ということです。
deferならhead内に書いても良いけどねぇ…。
変換時にaria-hidden属性も付きますね(ユーザーエージェントに認識させないことで音声読み上げ候補から外す)

なんか「デザインも全部1からやり直したんだぜ。」みたいなことも書いてありますね。
おっつー (´・ω・`)
いやホント頭が下がります。無料で使わせて頂けるなんて。
有料版もあるけど(笑)

記事内で利用している方は注意

えと。何に注意するかというと。
私がテンプレート内のFAバージョンを上げてしまうからです。
すみません(笑)

こういうバージョン変更は早いうちにしておかないと後々困るんですよね。先延ばしすると問題が蓄積されるというか。
古いバージョンを引き継ぐためには旧バージョンのCSSリンクを残さなければいけませんが、そんなのしたら高速化もなにも全部無駄どころか逆に負担になりますので やりません
ですから
記事内でバージョン4を利用している方はご自身で対処をお願いします。
えー。だってそれしかないもんな (´・ω・`)

hige
2018/02/08 (Thu) 17:34

待ってました!

 少し前に発表されてましてものすごく気になってました。
 なんか便利な絵文字(?)がAwesomeにないのかと時々見てまして、あれま 5 になってる。
 でも、なんかよう解らん むずかしいぞ。
 Akira 氏のテンプレもリニューアルで4.7.0だったので当分いいのか と。
 5.の記事はあれこれググって読んでみたんですが、これだけ書けば解るやろバカやろ、解らん素人に解説なんぞしない、というサイトばかりだったので、そのうち、こういう風に書けというサイトが出てくるんだろうなと。

 それがAkira 氏のページで出てきて、感激!
 で、CSSリンクを書き替えれば
 <i class="fa fa-external-link" aria-hidden="true"></i>
 とやってる、記事内の記述はそのままで良いのでしょうか。

 という形の質問は、某サイトtでは反感を買って、自分でやってみましたか と、突っ込まれる質問でした。

hige
2018/02/08 (Thu) 17:40

追記

script の方が良いのか?

vanillaice (Akira)
Akira
2018/02/08 (Thu) 20:21

To higeさん

higeさん、こんばんは ( ゚Д゚)ノ

記事内の記述は新しいバージョンに変更するなら書き換えないとダメですね。
旧)
<i class="fa fa-youtube" aria-hidden="true"></i>
新)
<i class="fab fa-youtube"></i>

これまでと同じ感覚で使いたい場合はscriptではなく旧来と同じlinkを使います。
でも今回せっかくscriptの提供がありますのでこちらを使いたいですよね (´・ω・`)

結局ページの描画というのはhtmlだけなら速いんです。
htmlを解釈する前にCSSを読まなきゃいけないのでその分遅くなるよ、と。
でも「デザイン」ってのがあるじゃないですか (´・ω・`)
仮にhtmlだけで先に描画させてその後でCSSを当てたら、一旦表示されたものがバババッって感じで並び替えしたり表示形態が変わったりするんです。まぁ当然ですけれど(笑)
だけど「スピード」を重視すればその方法が一番良いよ、ってことなんですよね。

で、FAをscriptで使うとdefer付いてますので、デザインというより表示そのものがちょっと遅れます。
ページが表示されて何も無かったところにパッと現れるみたいな。
それを良しと出来ない場合はやっぱりCSSのリンクを使った方が良いでしょうね。
私もどちらかというと嫌な方なんですよ。だから方針決めにちょっと時間食った ^^;
結論としてはscript使っていこうかなと思います。

旧CSSと新CSSの2つを読み込むというのはやっぱちょっとナシかなぁ、と思いますよね (´・ω・`)
あとね、script使う場合は今までのように「簡単便利」とはいかなくなると思います。
地味に上級者向けかなー…。SVGはアイコンフォントほど簡単に扱えるわけではないので、特に疑似要素で使いたい時とか。
疑似要素にすること自体はどうってことないですが、position使いたい時は多少頭をひねる必要が。

-------
CSSでもscriptでもhtmlの要素としては同じもので良いですよ。
script使う場合にはSVGに自動で書き換わります。
この「書き換わる」点もちょっと上級者向けじゃなーい? (´・ω・`)
要素検証を頼りにしてる人とか苦労しそうな気が ^^;

hige
2018/02/08 (Thu) 22:21

ひぇっ

 なんかむつかしい。
 なんとなく理解しました。
 記事内に使ってまして、awesomeにバージョンがあるので、なんか変更があるとイヤだなと云う予感はあったのですが。
 テンプレ内で使ってるのは数カ所を書き替えれば良いのですが記事内ではちょっとしんどいです。

 旧CSSと新CSSの2つを読み込むというのはやっぱちょっとナシ なんですねぇ。
 ちょっと今後の宿題に。

vanillaice (Akira)
Akira
2018/02/08 (Thu) 22:27

To higeさん

いやー、たぶんね、テンプレの方もしんどい(笑)
寧ろテンプレの方こそしんどい。
まぁそこは私がやるから良いんですけど。

ちょっとまだ今は触ら無い方が良いかもしんない (´・ω・`)

-------
今「Alternativeテンプレート」のメンテしてまして、そちらで試しに5のscript行ってみようと思います。
特に「表示のされ方」なんですが、良かったら明日以降確認してください。
今日の日付が変わる頃には上書きできると思うのでDEMOを差し替えておきます。

今ちょっと相方と海外ドラマ見てるんで後で((((笑)

hige
2018/02/08 (Thu) 23:37

No title

 相方と一緒にドラマなんて
 この数十年 ないなぁ・・・・・・

vanillaice (Akira)
Akira
2018/02/09 (Fri) 09:51

To higeさん

ね、寝てしもたがな(汗)
すみません進んでません ( ̄∀ ̄;)

うちはコンビニの店員さんからも「めちゃくちゃ仲良いですよね。」
って言われるばかップルです ( ゚Д゚)ノ

vanillaice (Akira)
Akira
2018/02/09 (Fri) 22:00

To higeさん

higeさん、私の間違いでした。
script使っても過去のものはちゃんと表示されますね。
疑似要素はダメだけど。

嘘ついてごめんなさい (∵`)

hige
2018/02/10 (Sat) 15:12

一日格闘

いえいえとんでもございません。

Font Awesome は記事中の外部リンクの部分に使ってまして、ver5になった時CSSを書き替えれば記事中のHTMLを触らなくて済ませられないかと、一日格闘しました。
(Font Awesomeのverが5.0.6になってました。)

で、疑似要素の::afterを勉強。
とりあえずcssにリンクの方が疑似要素に対応していると云うことなのでやってみました。
ver5の場合、本家のサイトと格闘してみると例文が書いてあったのでやってみます。

.extlink::after {
font-family: "Font Awesome 5 Solid";
content: "\f35d";
}

これが旨くいきません。フォントが豆腐になります。あきらめかけて、ググり続けたら、font-weight を900に設定しないと表示されないものがある、と云う記事を見つけました。

.extlink::after {
font-family: "Font Awesome 5 Free";
content: " \f35d";
font-weight : 900;
}

これで旨く表示されました。Solid の部分もFreeでないとダメでした。
これでHTMLのほうのリンク(a href)部分をclass指定して、今のうちに書き替えておけば、ver5に切替えた時に、CSSをこれに書き替えれば良いのではと云う考えです。

scriptの方も挑戦してみたのですが、旨くいきませんでした。

よく考えてみたら、Akira氏のテンプレ自体にFont Awesomeがかなり埋め込まれているので、自力での改変は様子見です。

と、この苦労を誰かに話したくて・・・・
私の犠牲になってください。

あと
>script使っても過去のものはちゃんと表示されます
とは、ver4..でもscriptが使えるという意味でしょうか。

vanillaice (Akira)
Akira
2018/02/10 (Sat) 15:39

To higeさん

ちょっと今あまり時間がないので簡潔に。

<i class="fa fa-xxx"></i>
こういう内容の場合には問題なく表示できるかと思います。
問題になるのは
・i要素自体(FAアイコン自体)に背景がつけてある)
・疑似要素
・疑似要素+position

疑似要素のポイントは

.xxx::before {
content: "ユニコード";
display: none;
font-family: 'Font Awesome 5 Solid';
}

display: none をつけないと豆腐が出ます。
で、これまではこんな感じだったお思うんです ↓

.xxx::before {
content: "ユニコード";
display: none;
font-family: 'Font Awesome 5 Solid';
font-size: 12px;
color: white;

}

この赤字は効きません。
5では
親要素からの継承 or SVG変換後のクラスに指定
のいずれかですね。

例)
.xxx::before {
content: "\f105";
font-family: 'Font Awesome 5 Solid';
}

.xxx .svg-inline--fa {
font-size: 12px;
color: white;
}

-----
親要素から継承させる場合、アイコンの色とサイズがテキストのそれと違う場合にはテキストをspanなどで囲って別途でsizeとcolorの指定をしなければいけませんので非効率かなぁと思います。

FAを擬似要素、さらにposition: absoluteなんかを指定したい場合にはもう少し難しくなります。
これまでのやり方ではできません。何故かというとdisplay: noneが必要だから。
absoluteするパターンはあまり無いと思うので今は省きます(笑)
必要ならば言ってください (ノ゚ェ゚)

------ 追記
before疑似要素をサンプルにしましたが、afterでも同じです。
ちょっと気が利かなかった。ごめんなさい(笑)
あー!あともういっこあった。
scriptで疑似要素の場合は

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

これも要ります。
FAのメインJSの上に書けばOK。

--------
しばらくAlternativeテンプレに変更しておきます。
個別記事のページ送り矢印が擬似要素のpositionですのでご覧くださいね。
私の都合でまたテンプレート変更しますので間に合えば良いけど(笑)

hige
2018/02/11 (Sun) 11:35

ありがとうございました。

 お忙しい中、テンプレに直接関係ないことで回答いただきありがとうございました。
 早速AlternativeをDLさせて頂きました。
 実はこちらのテンプレ、前から気になっていたのですが、どうしてもブログタイトルの背景にオリジナルの画像を入れたくて、それをやるには相当の気力がいるので・・・・それまで保留。

 このテンプレのHTMLを拝見させていただき、fontawesomeのscript部分をコピーして試してみました。
 手持のエディター(VSCode)上で表示、確認できました。 display:none の、あるなしの影響も確認できました。
 ついでに、テスト用ブログで、2種類にテンプレ上でも表示ができました。
 もともとscriptも両方入れていて確認していたのですが、旨くいかなかったのは、なにかわからない誤字があったのかも知れません。

 しつこいようですが、相変わらずCSSリンクの方法では前回通りの表示になります。
 でも、どうせAkira 氏はscript派でしょうから、CSSリンクのほうは忘れることに。

 多謝!!
 

vanillaice (Akira)
Akira
2018/02/11 (Sun) 16:00

To higeさん

記事書きましたのでご覧くださいね。
たぶんCSSの方ではもう表示できないんだと思う (´・ω・`)

ちょっと難しくなっちゃった感はあります (*´・ω・`)

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