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

待ってました！

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

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

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

追記

script の方が良いのか？

To ｈｉｇｅさん

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に自動で書き換わります。
この「書き換わる」点もちょっと上級者向けじゃなーい？ (´・ω・｀)
要素検証を頼りにしてる人とか苦労しそうな気が ^^;

ひぇっ

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

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

To ｈｉｇｅさん

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

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

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

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

No title

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

To ｈｉｇｅさん

ね、寝てしもたがな(汗)
すみません進んでません （￣∀￣；）

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

To ｈｉｇｅさん

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

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

一日格闘

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

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が使えるという意味でしょうか。

To ｈｉｇｅさん

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

<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ですのでご覧くださいね。
私の都合でまたテンプレート変更しますので間に合えば良いけど(笑)

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

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

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

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

　多謝！！
　

To ｈｉｇｅさん

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

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