これまでの4.x系と違って色々と変更しているようなので、ブログで利用しながら変更点を見ていくことにしました。4.x→5への更新は結構大変でした主な変更点URLが変更になった有料のProバージョンが登場JavaScriptとSVGによる描画に対応アイコンが種類ごとに分類されたURLが変更になった変更前:fontawesome.io変更後:fontawesome.comドメインが.ioから.comへ変更され、旧URLからアクセスすると移転後のURLへリダイレクトされます。従来のCDNでもそのままアイコンフォントは読み込まれます。Pro」が登場しました。Proバージョンでは利用できるアイコンの種類が増えて、フリー版と比べて1,300種類多い(合計2,316種類)です。ここまで多いと使い切れそうにありません...。light)ようになったり、アイコンフォントのリガチャに対応します。無料で利用できるアイコン一覧はこちら。Awesomefontawesome.comJavaScriptとSVGによる描画に対応アイコンフォントの読み込みをJavaScriptとSVGによる描画が選べるようになりました。これまではCSSとウェブフォントを利用して呼んでいましたが、バージョン5.xからはこちらの方法が推奨されているのだそう。Started」をご確認下さい。Awesomefontawesome.comこれまでのようにCSSとアイコンフォントによる読み込みにも対応しています。Brands(ブランド)の4種類に分類分けされました。種類分けによって以前のバージョン4.xからアイコン名の命名ルールが変わっているので要注意。4.xからのアップデートガイドはこちらを確認下さい。Awesomefontawesome.comアップデートを手助けする「fa-v4-shim.js」というのもあるそうです。src="/static/fontawesome/fa-v4-shim.js"></script>新バージョンの使い方CDNからJavaScriptを読み込みます。HTMLファイルの<head>~</head>の間に、以下のタグを挿入します。src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>アイコン一覧から使いたいアイコンを探します。ここでは新たに登場したLINEのアイコンを使ってみます。左下に表示されたコードをコピーして使いたい場所に貼り付けます。コードの横にあるアイコンをクリックするとコードがコピーされます。fa-line"></i>よく見ると4.xではclass名が.faだったのに.fabに変更されています。fabの4種類になったようです。ページを表示すると、先ほど埋め込んだJSがfontAwesomeを使っているアイコンを判別してSVGアイコンに置換します。上のアイコンは見やすいように2倍に拡大しています。(class名にfa-2xを追加)吐き出されるソースは以下のようになりました。-->SVGなのでアイコンフォント同様に拡大してもくっきり見えますし、JSで使っているアイコンだけ描画されるので多少は軽くなるかも(未確認)疑似要素を使って表示する方法CSSの疑似要素:beforeと:afterを使って表示する場合、通常よりもちょっと手間が掛かります。none;で疑似要素とiタグを消すSVGタグに対してスタイルを効かせるfont-family指定は使用するフォントの種類によって異なります。アイコン一覧の左サイドバーにあるフィルターでどの種類か確認した上で指定して下さい。none;で消すのは、先ほど説明したようにSVGに置換されるため疑似要素があると2重でアイコンが表示されるため。SVGとセットで<i>タグも生成されるため、一緒に消しておくことを忘れずに!スタイルを当てるときはSVGタグ(.svg-inline--fa)に色なりマージンなり追加して下さい。4.x→5への更新は結構大変でした実際にこのブログも1つずつちまちま朝から作業していましたが、気がついたらアイコンの調整に数時間掛かってしまいました...。class名が変わっているのと、指定するフォントファミリーが異なっていたり、:beforeや<i>タグにスタイルを当てていたのをSVGに置き換えたり...。サイトのページ表示が遅いのもあって時間掛かりました。やる時は時間があるときにゆっくり対応した方が良さそうです。新規サイトで導入するなら新バージョンがいいでしょう。関連記事WordPressをロリポップ!からMixHostへ移転しました。鹿このブログを管理している鹿。Webデザインとガジェットが好き。Olderイオンモバイル、2018年3月1日(木)からau回線を取扱開始。サービス開始2周年記念の特典もnuroモバイルのソフトバンク回線を契約。Meこのブログを運営している”自称”カワイイ鹿。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。Inkscape」を試してみました。Simsellerで「梅の花満開!ウインターセール」を開催中。キャンペーン2020」で事務手数料無料+SIMのみプランが激安価格で申し込める!Satechiの電流・電圧チェッカー「ST-TCPM」レビュー。UBOOM」レビュー。Clip(クリエイタークリップ)は、ウェブデザインやガジェットについて書いているブログです。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。ClipHOMEABOUTPROFILECONTACT。