先回ちょっと間違った情報を書いてしまいましたので、改めて。
毎度のことですがweb一般情報ではなく「FC2で」「私が製作したテンプレートで」の括りがつきます。私の記事は基本的にそんな感じ (´・ω・｀)
(めんどうなので今回も Font Awesome を FA と略称します)
まるで既存のFA用i要素あるいはspan要素全てが全滅のような書き方をしてしまったのですが、実際はそうではなく。
その点の補足説明なども行おうと思います。
一番気になる 既存内容の修正が必要かどうか について。
既存テンプレートに関して、今後メンテナンスあるいは修正を行う対象についてはその都度バージョン4から5へ、CSSからJSへと内容を切り替えていきます。
既に変更を行なったテンプレートは2018年2月10日現在で Alternative のみです。
先回の記事
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にも存在します。
スタイル分類の Solid と Brands を赤く囲いました。
無料で利用できるものはこの2種のスタイルです。
それぞれのプリフィックスは fas と fab ですね。
ブランドアイコンが区別されるようになりました【書き換え必須】
これまでは有料版を除く全アイコンが fa で統一されていましたが、バージョン5からはブランドアイコンを区別するように変わりました。
Facebook とか Twitter とか Apple などの企業ロゴとかそういうの。
ここたぶん商業的な理由がありそうなんですが、バージョンアップにあたり大事なのは
プリフィックス「fab」を有するアイコンは旧書式では表示が行われない
という点です。
Facebookアイコンをサンプルに旧来のhtml内容は以下の通り。
<i class="fa fa-facebook" aria-hidden="true"></i>
本バージョンからCSSかJSか選べるようになっています(後述)が、どちらを選んでもブランドのfabに分類されるものについては表示されません。
まぁ事情はなんとなくわからんでもない (´・ω・｀)
というわけで、既存内容でブランドアイコンに相当するものについては 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」です。
.test:before {
content: "\f39e";
font-family: 'Font Awesome 5 Brands';
display: none;
}
まとめ
とりあえず記事内で使っているとすればこんなところかな、と思います。
もっと複雑なことをやっていて、今後のテンプレート内FAのバージョンアップで記事内容に問題が生じたという場合には個別にご相談ください。
私のテンプレートに無関係な場合は自分でやってね？ (´・ω・｀)
There are no comments yet.