脱Font Awesomeを目指す方へ修正方法や提案など

投稿 2018年08月10日
6
カスタマイズ
FC2SEOTipsFontAwesome高速化上級者向け

Font Awesomeのバージョン5重たいですよね (´・ω・`)
(以下 FA と称す)

2018年現在で推奨は JS + SVG での表示です。
もうひとつ CSS + webアイコンフォント も残されています。
CSSの方をFAがいつまでサポートしてくれるか不明ですが、初心者にとってはCSSの方が扱いやすいと思います。

FC2はHTTP/2が利用できますので並列リクエストが可能とはいえ、ページの(htmlの)レンダリングは CSSのパースが終わらなければ始まりません ので基本的にCSSが肥大するのは良くないですね。
できればCSSは避けたいので本記事ではCSSの利用は考慮しません。
いや、CSS自体は使いますが、FAの「CSS + webアイコンフォント」は利用しないよ、という意味です。

JS + SVG が何故重たいかという原因は 利用していないデータもダウンロードしている のと、html要素を動的にSVGに変換している ためです。
解消策としては以下のような感じになるかと思います。あくまでも提案として。

  • テンプレート内のFAは インラインSVG に修正
  • 過去記事で利用したFAは SVGをdataURI化し、backgroundとして扱う

どちらか一方にまとめない方が良いと思います。というかまとめたらたぶん泣く(笑)
というわけで修正に役に立つ「かも」しれないtips。

大前提

えと。他者制作テンプレートについては言及しません。そして例によってFC2ブロガー向け・私の制作したテンプレートをご利用の方向けの内容です。
内容の一部は汎用的に使えますが、自己責任・自己判断でお願いします。

「脱FA」を目的とした記事ですので、web上の全てのSVGに流用できる方法とは限りません。
といっても基本は同じですが。
上級者向け記事、ということでhtmlエディターを必要としたりオンラインツールの利用もありますが、それらについて細かい説明はしません(ごめんね)
以下は作業の方針を含みます。

  • FC2ブログはSVGファイルのアップロード不可
  • 第三サービスを経由しない

htmlのSVG要素を利用するには

  1. img要素として掲載 (src属性)
  2. object要素として掲載 (data属性)
  3. インラインSVGとして掲載

といったいくつかの方法がありますが、FC2ブログはSVGフォーマットのアップロードができませんので 1 と 2 の使い方はできません。
そしてFC2ブログ外のサービスを経由させるのは本末転倒ですからここでの対策としては除外します。
という事情から残される方法は 3 となります。

テンプレート内修正「インラインSVG」

重要ポイント
シンボル化による使い回し

結局のところ、これまで
<i class="fab fa-apple"></i>
こんな風に書いていたものを以下のように書き直せば良いだけです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376.5 512"><path d="M314.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C59.3 141.2 0 184.8 0 273.5c0 26.2 4.8 53.3 14.4 81.2 12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>

SVGというのはxml言語のテキストデータですから、直に埋め込みすれば画像のようなアップロードも不要です。
コード内には http: の文字列を見つけられますが、これはどこかに通信しているわけではなく「xml言語を利用します」という宣言に利用するだけです。

FAは簡単なhtmlを書くだけで自動で上記のような形に変換してくれているわけですね。
その変換作業にJSが使われています。
ですから変換作業をさせない。最初から変換後のhtmlを書いておけば良いだけです。これでJSが不要になります。

で、この文字データをどこから引っ張ってくるかですよね。

ファイルのダウンロード

Download Font Awesome Free
1,295 icons, Web Frameworks, SVG source files, and more

上記を押してDLが始まるわけではありません。遷移先ページのFAご本家でこれに似たリンクを押してDLしてください。

  1. CSS
  2. JS
  3. less
  4. LICENSE
  5. metadata
  6. scss
  7. sprites
  8. svgs
  9. webfonts

zipフォルダを解凍すると中に9つのフォルダが入っています。利用するのは svgs の名称が付いているフォルダです。

svgsフォルダの中にはさらに

  1. brands
  2. regular
  3. solid

上記3つのフォルダが入っています。
brandsはSNSやベンダーやwebサービスなどのブランドアイコン系ですね。
regularはストローク系(外罫)あり、solidはベタ塗り系が多いです。

この3つのフォルダ内から テンプレートに記載されているアイコンを探します。 例えばテンプレートに <i class="fab fa-facebook-f"></i> とありましたら、最初のクラス名 fab の b は「brands」のbですから、brandsフォルダ内から同じアイコンを見つけます。
同じ要領で <i class="far fa-comment"></i> ならば far の r は「regular」のrなのでregularフォルダ内にあります。

regularフォルダ サンプル

テキストデータを取り出す

対象アイコンをhtmlエディターにドラッグ&ドロップすることでデータの取得が可能です。

sublime text3でのサンプル

実際のコードはコチラ。Amazonのブランドアイコンです ↓

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/></svg>
<!--
Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->

概要はこんな感じです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="x軸 y軸 横幅 縦幅">
  <path 文字列>
</svg>

SVGのシンボル化、USEタグによる使い回し

これからテンプレート内のi要素をsvg要素に置き換えていきますが、やり方は2通りあります。

  1. 単純に全てを置き換える
  2. 重複する内容は SVGをシンボル化して使い回す

例えばコメントアイコンなどはソース内に何度も出てきます。
それを一つづつ全てインラインで置き換える、つまり繰り返し表記となるとhtml量が多くなりますし、感覚的に言ってもなんとなく無駄な気がしますよね。
そこで <symbol> を利用して繰り返し表現を簡素化します。

CSSに variables (変数)というのがありますが、それと似ていますね。
最初に定義をしておいて、必要箇所で呼び出す方法です。

SVGをシンボル化して先に定義

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <symbol id="固有名1">
      <path d="文字列"/>
    </symbol>
    <symbol id="固有名2">
      <path d="文字列"/>
    </symbol>
  </defs>
</svg>

FAの場合はこれで良いと思います。
他にも <g> というグループ化する要素などがありますがFAではとりあえず不要。
上記雛形にはsymbolが2つあります。こうして複数のSVGをまとめて定義することができます。

最初に取得したAmazonのアイコンをもう一度。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/>
</svg>

この作業で必要なのは <path> のみです。
そして idの付与 が必要です。呼び出す際に使いますので必ず付けます。
classでなくidである点に注意。
で、このid名は FAでもともと付与されている名称を使わない方が良い と思います。
Amazonの場合は <i class="fab fa-amazon"></i> でクラス名に fabfa-amazon が使われていますが、同じ名称は避けた方が都合が良いはずなので(後々わかります)別称を考えます。
ここでは inline-amazon とします。
以下の通り。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <symbol id="inline-amazon">
      <path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/>
    </symbol>
  </defs>
</svg>

path要素はコピペしただけです。重要箇所は緑にしてあります。
まずsvg要素に display: none の指定。これは必ず必要です。
そして先程決めたid属性も忘れずに。
同じ要領で複数のアイコンを定義していきます。
id名の重複に気をつけ、また法則性も作っておきます。

id名は規則性を持たせた方が管理しやすいですね。例えば <i class="far fa-comment"></i> ならば先程のamazonと同じく inline-comment にするとか。

記述箇所は <body> の直下、直下にアクセス解析が記載されている場合はその下でOKです。
これから各所で呼び出しを行いますので、呼び出しコードよりも前に記しておく必要があります。

余力があればFC2独自変数を利用すると良いですね。html内に何かを記す利点でもあります(スタイルシート内での独自変数利用はできません)

USEタグによる呼び出し

SVGのシンボル化を済ませたら、次は実際にi要素FAが記載されている箇所を探します。
それぞれを以下の通り修正。

<svg class="共通クラス名 アイコン種固有クラス名" viewBox="x, y, width, height" role="img"><use xlink:href="#呼び出すSVGの名称"></use></svg>

まず 共通クラス名 を決めておきます。
facebookアイコンにもコメントアイコンにもamazonアイコンにも、つまり全てのアイコンに共通でつけるクラス名です。
元のFAで言うところの fa(旧FA), fab, fas, far がそれに当たります。
ですがシンボル化と同様FAが元々持っているクラス名は避けます。
ここでは svg-inline とします。

続いて固有クラス名。「固有」というのはidという意味ではないですよ。amazonアイコンだけが持つクラス名、facebookアイコンだけが持つ… という意味です。 元のFAで言うところの fa-facebook, fa-amazon などがそれに当たります。
ここでは svg-inline-amazon とします。
以下の通り。

<svg class="svg-inline svg-inline-amazon" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-amazon"></use></svg>

viewbox属性を必ず付けます。
最初に取得したテキストデータに記されていますので、ここでコピペします。
これがアイコンの縦横比を決めています。シンボル化コード内ではなく呼び出しコード内の方に書きます。
縦横比は各アイコン毎に異なりますので、必ず対象アイコンと合致したものを記載します。でないと歪んじゃいますよ。

role属性 にimgを指定してあります。
こちらは任意ですが付けておくと音声機能ではシンプルに「イメージ」と読み上げられます。

xlink:href へは呼び出したいSVGに付与したid名を指定します。# (ハッシュ)を忘れずに。
ちなみに「ハッシュ #」と「シャープ ♯」は別の記号です。

以上でテンプレートhtmlの修正は終了です。
続いてCSSの追加です。

テンプレート内Font Awesome SVGのスタイリング

.svg-inline {
  display: inline-block;
  height: 1em;
  font-size: inherit;
  vertical-align: -.125em;
  fill: currentColor
 }

共通クラス名 (サンプルでは .svg-inline)へのCSSスタイリングです。
全FAアイコンに共通するのは vertical-align: -.125em です。
top, middle, bottom では見た目が上手く調整できませんので -.125em 指定にしておきます。

最重要プロパティは fill で、値には currentColor を指定しておきます。
inherit ではなく currentColor です。そして currencolor や corrent-color ではなく currentColor というキャメルケースです。
SVGフォーマットの色指定にcolorプロパティは効きません。fillプロパティを利用してください。
値にcurrentColorを指定しておくと、通常テキストのアイコン, リンク内のアイコン, リンク内でhoverで色変更したい場合のアイコンなど逐一色指定する必要が無くなります。

currentColor指定の例 (下段)

ピンク色指定ブロック

ピンク色指定ブロック

固有クラス名 (サンプルでは .svg-inline-xxx)のスタイリングについてはマチマチだと思いますのでその都度追加します。
簡素な内容であればスタイルシートに分けずhttml内の呼び出し側svgタグにstyle属性として追加しても良いと思います。

<svg class="svg-inline" id="svg-inline-pencil-alt" viewBox="0 0 512 512" role="img" style="margin-left: 10px;"><use xlink:href="#inline-pencil-alt"></use></svg>

指定数が多い場合にはスタイルシートへ。そこは臨機応変に行ってください。

過去記事修正「CSS dataURI background」

新規でUPする記事の中でFAを利用する場合にはインラインSVGをベタ貼りすれば良いですね。
問題は 過去記事で既に書かれているFAのi要素 をどうするか、です。

一つの選択肢として SVGをdataURI化し、background-imageとして掲載 する方法があります。
ただこの方法はSVGの利点を打ち消してしまうものでもあります。

SVGのbackground掲載

メリット(pros)
後の管理が楽
スタイルシート単位でのキャッシュが効く
デメリット(cons)
初回の設定が面倒
冗長になる
色変更不可

インラインSVGにしろdataURIにしろキャッシュが効きません。
(が、通信リクエストが発生しませんので過剰な内容でなければプラマイでプラスが上回ると捉えて良いと思います)
ただdataURIをスタイルシート内で利用する場合にはスタイルシート自体がキャッシュ対象なので「効く」に転じます。
スタイルシートで一括管理できますので楽とも言えます。これらはメリットですよね。

初回設定が面倒な件は後述するとして。
CSS内容が肥大するとレンダリングの開始が遅くなりますので、冗長な内容になるdataURIは良くなさそうですが、FC2ブログではスタイルシートの転送はgzipですから気にする程度ではないと思います。が、一応デメリットということにしておきます。
最大のデメリットは 色の変更ができない ことです。
インラインSVGの場合はfillプロパティで簡単にできますがdataURI化した場合はそういうわけにいきません。

なのでリンクテキスト内に含めたり(テキスト部分と色が揃いません)、色違いをいくつも表示する(dataURIを別々に作成する必要があります)といった使い方には向きませんが、過去記事の対処としては十分使えるのではないかと思います。
テンプレートの場合にはこのデメリットが許容できないだろうと思いますので別の処理としています。

あとは過去に利用したアイコンについては既にi要素として記載されており、FAのファイルを削除するのですからSVG要素への自動変換が行われません。
なのであくまでもi要素はアウトラインとしての役割で使うのみで、表示はbackgroundとして当てはめるといった方法になります。
書き直すの嫌ですよね。なので書き直さなくて済むための方法を今書いています(笑)

ちなみにi要素は旧htmlでは「斜体」でしたがhtml5では定義が全く異なり、「他テキストと区別する」「心の中で思ったことを文章化する(思考の文章化)」などに利用します。というかこれは英語本来のgrammarがそうなので「斜体にするため」に使ってたのってたぶん日本人ぐらいじゃないのか (´・ω・`)

SVGをdataURIに変換する

URL-encoder for SVG

SVGをdataURIにエンコード変換

上記がおすすめオンラインサービスですが他の類似サイトでも構いません。
日本で利用するならば エンコード も同時に行ってくれるものが望ましいですね。
(CSSファイルにurf-8が指定されていれば不要ですがそれでも念の為。私のテンプレートは指定してあります)

FAからダウンロードしてテキストデータを取り出したものをそのまま放り込むだけです。
その前に追加項目として fill属性 で色指定をしておきましょう。

元のコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/></svg>

fill属性追加

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="rgb(255,255,255)"><path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/></svg>

dataURI変換後(fill属性つき)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='rgb(255,255,255)'%3E%3Cpath d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z'/%3E%3C/svg%3E");

スタイルシート追加内容

ここで「初回設定が面倒」な件。
アイコンの縦横比は一定ではありませんよ、と既にお伝えしましたが、i要素のまま流用するためにはアイコン毎にサイズの指定が必要です。
これが非常にめんどくさい (´・ェ・`)

まず使いたい(使っている)アイコンを全て抜き出してリストにします。
これから必要になるのは 共通クラス名固有クラス名viewBox属性 です。 特にviewBoxの値は計算が必要なのでviewBox値が同じものをまとめておくと作業が捗るかと思います。

比率計算機 - instant tools

2つの値の比率計算をするツールです。2つの入力値から、 その整数比、全体を100としたときのそれぞれの割合、 片方の値を指定した値としたときの比、の複数形式での比率計算を同時に行います。

おすすめサイトです。
FAサイトを開いて開発者ツールで調べられる人はそれでも構いません。自身にとってよりめんどくさくない方法を選んでください(笑)

サンプルに利用しているAmazonのviewBoxは viewBox="0 0 448 512" です。
448が「横」512が「縦」です。
それぞれの数値を上記サイトに入力します。

見る箇所は赤く囲った部位です。
x : 1 = 0.875 : 1
となっていますね。必要なのは x の値 0.875 です。

FAの表示はheightを基準にしています。どのアイコンもheightは 1em として表示します。
なのでheightは共通クラスの方へ 1em として指定。widthは固有クラスの方へ各値を指定します。

以下は例として
<i class="fab fa-amazon"></i>
<i class="fas fa-link"></i>
<i class="fas fa-mobile-alt"></i>
の3アイコンをまとめたものです。

.fa, .fas, .far, .fab {
  display: inline-block;
  height: 1em;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: inherit;
  vertical-align: -.125em;
}

.fa-amazon {
  width: .875em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='rgb(51,51,51)'%3E%3Cpath d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z'/%3E%3C/svg%3E");
}

.fa-link {
  width: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='rgb(51,51,51)'%3E%3Cpath d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'/%3E%3C/svg%3E");
}

.fa-mobile-alt {
  width: .625em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='rgb(51,51,51)'%3E%3Cpath d='M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z'/%3E%3C/svg%3E");
}

以下はフォントサイズ1.8emで表示したものです。

まとめ

新規はインラインSVGで、過去はdataURI backgroundで。
という形の対処法をお伝えしました。
過去記事内容については完璧なものにはならないかもしれませんが。

こういった手法は何かとありますけれど、html内容はどうしても大きくなってしまいますね。
それでも「Font Awesomeクッソ重たい」は脱することが出来るかと思います。

ところで、GTmetrixのスコアについて。
Yslowの方がなんともマヌケな指摘でスコアを下げる結果となりました。
CDNサーバーを利用していないじゃないか
というのがその指摘です。JSファイルを減らしたのに指摘されている(笑)
こういう「利用率」系の減点方式は当てにならないですよねぇ (´・ω・`)
ただやはりフルロードタイムは上がっています。

めんどくさくてもどんと来いな方はお試しあれ。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

6 COMMENTS

There are no comments yet.

ロビンソン  

お世話になります。
過去記事も含め、全て適用しました。
GTmetrixの数値はあまり変化はありませんでしたが、体感スピードは早くなっているように思います。
ただし、IEではかなり崩れますね(苦笑)

2018/08/13 (Mon) 00:19
vanillaice (Akira)

Akira  

To ロビンソンさん

こんばんは (ノ゚ェ゚)

今回はスピードテスト対策ではないです。
FAはasync, deferが付いていますので元より指摘対象ではありません。
どんなに重たくても、です。
なので今回の主旨は体感速度の方ですね。

IEについてはもう私のブログ自体IEでは閲覧困難なのでソースコード紹介もサポートしていません。
フォールバックだらけでソースが汚れるのでやらないことにしています (´・ω・`)
IEはたぶんwidth, height属性を書かないとダメだったような。
viewboxの後ろの二つの値をそれぞれwidth, height属性に指定してみると良いかもしれません。
(動作検証はしていません)

2018/08/13 (Mon) 01:28

ロビンソン  

ご回答ありがとうございます。
スタイルシートでheight="1em"と定義しているので、html内にwidth="数値"を追加したら正常に表示されました。
ちなみに私のブログでは、まだIEからの閲覧が20%近くあります(笑)

2018/08/13 (Mon) 01:33
vanillaice (Akira)

Akira  

To ロビンソンさん

ロビンソンさん、ごめんなさい。
編集だと気づかないことがあります ^^;
お返事遅くなりました (*_ _)

------
width属性(html)とwidthプロパティ(CSS)は意味が違います。
width属性は描画領域の指定、widthプロパティは自身のサイズ指定です。
IEでのSVG掲載の場合はプロパティではなくhtml属性の方が必要です。
あとスタイルシート内に height="1em" という指定はできないので height: 1em; の書き間違いですかね。たぶん。

IE閲覧については私はこういう意見 ↓ なんです。

「【朗報】今後はInternet Explorerに対応させなくていいぜ!その理由と考察」ghost_in_the_info様
https://ghostinthe.info/post-1128/

「マイクロソフト「IE依存」せざるを得ない現場の苦悩」山本一郎 様
https://news.yahoo.co.jp/byline/yamamotoichiro/20180725-00090691/

前者のページ内で
「そもそもなんでビル・ゲイツがサポートしてないものをweb製作者が対応しないといけないのか。」
という一文がありますけども、まさしくその通りで。
日本人というのはちょっと変わっていますよね。日本人というか日本のwebシステム全般が。
IEのサポートは一見親切に見えますが、そのせいでなかなか皆さん改善しようとしないんですよ。
それってゲームの開発会社に「俺はファミコンしか持ってないんだからプレステ4だけじゃなくファミコンもサポートしろ」と言っているようなものです。
企業レベルの事情ならアレですが、個人サイトレベルまでズブズブに依存しているのは日本ぐらいのものです。
ちなみに私のページはIE率3%程度です。なぜならIEから閲覧したら警告が出るから(笑)

人間って「使える」と思ったら使ってしまうんですよね。
なのでモダンブラウザの「現行と一個前のバージョンしかサポートしない」は傲慢なようですが至って健全だと思います。

とはいえ個人の采配なのでIEサポートについては自由だと思っていますー (´・ω・`)

2018/08/16 (Thu) 03:26

ロビンソン  

To Akiraさん

IE率はカテゴリーにもよるかもですね。
私のブログカテゴリーはFC2率も高いのですが、ほとんどがSSL化されていないようです。
Akiraさんのテンプレートを使用しているブログも含めて(笑)

ー追記ー
スタイルシート内のblockquoteはこのブログのソースを参考にさせていただきました。

2018/08/16 (Thu) 10:32
vanillaice (Akira)

Akira  

To ロビンソンさん

こんにちは ('0')/

SSL化はFC2に於いては自己責任で (o'ω')ノ
そしてIEそれ自体が悪いってわけじゃないんですよね。
ダラダラサポートし続けたMSが悪いんです(笑)
だってフツーは1〜2ヶ月単位でアップデートがあるのにIEは5年も6年もほったらかしとか。
バージョン上がるとUIからなにからなにかも変わってて驚くとか。
まぁMSも路線変更したので今後に期待(個人的には全く期待しませんが)

2018/08/18 (Sat) 03:41