紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

Fontawesomeは使わないほうがいい話【初心者向け】

f:id:slash1196:20210816111258j:plain

f:id:slash1196:20200520205950j:plain

ブログ初心者

 

「Fontawesomeを使ってみたいけど、なんか注意点とかありますか?

使わないほうがいいっていう意見もあるし、表示速度は落としたくない。

どうしたらいいか教えてほしいな。」

 

こんなお悩みにお答えします。

 

この記事でわかること

  • Fontawesomeは使わないほうがいい話
  • Fontawesomeを使わないでアイコンを使う方法

 

こんにちわ、紅蓮です。

 

ブログをしていてアイコンを使いたいとき、「Fontawesomeを使おう」なんて自動で決めていませんか?

 

今回は、Fontawesomeは使わないほうがいい話をご紹介していきましょう。

 

この記事を読めばFontawesomeを使わないほうがいい理由や、代わりにどんなことをすべきかがばっちりわかります。

 

この記事を書く僕は、ブログ運営歴は3年目。

現在はアフィリエイトからの収益が、毎月3,000円ほど入ってきています。

 

そんな僕もアイコンの使い方がわからずに、Fontawesomeを思考停止状態で使っていました。

 

しかしひょんなことから、疑問に感じて利用を停止。怖いことが分かったんです。そんな方法なのでぜひ最後までお読みの上、実践してくださいね。

 

では行ってみましょう。

Here We Go!!

 

 

Fontawesomeは使わないほうがいい話

f:id:slash1196:20210801011447j:plain

結論から言うと、Fontawesomeは使わないほうがいいですね。

 

というのも、以下のような問題点があるからですね。

 

Fontawesomeの問題点

Fontawesomeの問題点は、以下の通り。

 

  • 問題点①使いたいものだけを使えない
  • 問題点②読み込みに時間がかかる
  • 問題点③うまく表示されないことがある

 

では詳しく見ていきましょう。

 

問題点①使いたいものだけを使えない

問題点の1つ目は、使いたいものだけを使えないことなんです。

実はFontawesomeって、めちゃくちゃフォントが多いことで有名なんですよね。

無料で使えるだけでも、なんと1,500以上ですね。

 

そのことが人気になっているのですが、ちょっと問題点が…。

 

それは、使いたいものだけを読み込むことができないことですね。

 

Fontawesomeを使う場合って、ほとんどの場合がCDNといわれるサーバーに置かれているものを呼び出すようにすることで表示させるんで、使うものだけでなくて使わないものも一緒に読み込みに行っちゃうんですよね。

 

必要のないものまで読みに行くのは、もったいない気がしますよね。

 

問題点②読み込みに時間がかかる

問題点の2つ目は、読み込みに時間がかかることですね。

 

これは問題点①にもリンクするんですが、必要ないものまで読み込んでしまうからなんです。

 

上記で、アイコンって使うものだけを見るとどんだけ使っても10個以内だったりしますよね。

 

どんなに頑張っても1,500も使わないです。

 

それなのに読み込みに行くので読み込みに時間がかかってしまいその結果、表示速度に大きな影響が出るんですよね。

 

しかもスマホからみられる世の中なので、アイコンを読み込みに行くのが多いとスマホでの表示速度が遅くなってしまいます。

 

これは問題ですよね。

 

問題点③うまく表示されないことがある

問題点の3つ目は、うまく表示されないことがあることですね。

 

Fontawesomeのアイコンは、読み込み先をうまく読み込まれないことがありますそのために時間を使うこともたびたびありますね。

 

そのために書くことだけに集中できずに、時間だけが立っていくこともたびたびありますね。

 

ちなみに僕はFontawesomeを使っていた時にはどうしてもうまく表示されなくて、3日3晩寝れなかったことがありますね。

 

うまく表示されないと気になってしまうので、デメリットですよね。

 

本当にfontawesomeは必要なのか問題

正直Fontawesomeって量が多くて非常に重宝するんですが、その量ゆえに使わないことって多いんですよね。

 

その量は本当に必要ですかって話ですよね。

 

正直僕は、ホーム画面のグローバルメニューと、サイドバーのところにはアイコンを入れていないので、そんなに使わないんですよね。

 

そう考えたときに、必要ないかなって思うんです。

 

だから、Fontawesomeを使う必要ってないかなって思いますね。

 

Fontawesomeを使わないでアイコンを使う方法

f:id:slash1196:20210703191904j:plain

ではここでFontawesomeを使わないでアイコンを使う方法をお話していきましょう。

 

 

方法は2つあり、以下の通り。

 

  • 方法①Fontawesomeのアイコンの数を物理的に減らす
  • 方法②画像としてアイコンを使う

 

では詳しく見ていきましょう。

 

方法①Fontawesomeのアイコンの数を物理的に減らす

一つ目の方法は、Fontawesomeのアイコンの数を物理的に減らす方法ですね。

 

この方法は、ツールを使ってアイコンフォントの数を物理的に減らすことによって読み込む数を減らす方法ですね。

 

やり方は以下の通り。

 

  • 手順①Fontawesomeにアクセスし、アイコンをダウンロード
  • 手順②icomoonにアクセスし、ダウンロードしたアイコンをインポートする
  • 手順③必要なアイコンだけをチェックする
  • 手順④アイコンをダウンロードする
  • 手順⑤ダウンロードしたデータをサーバーにアップロードする
  • 手順⑥CSSに読み込ませる
  • 手順⑦HTMLで<i>タグを使って呼び出す

 

詳しく見ていきましょう。

 

手順①Fontawesomeにアクセスし、アイコンをダウンロード

f:id:slash1196:20210816105210j:plain

まずFont Awesomeにアクセスしましょう。

 

そしてスクロールして「Free for Web」をクリックし、ダウンロードしましょう。

 

手順②icomoonにアクセスし、ダウンロードしたアイコンをインポートする

f:id:slash1196:20210816105314j:plain

次に IcoMoonにアクセスします。

 

先ほどダウンロードしたアイコンをインポートしていきましょう。

 

まず一番最初にダウンロードしたファイルがzipファイルですので、開いて解凍しておきましょう。

 

その後、icomoonのサイトの左上にある「import icon」をクリックし、先ほどのダウンロードした解凍ファイルをクリックします。

 

f:id:slash1196:20210816105506j:plain

 すると中には以下のようなフォルダーがあるはず。

 

  • CSS
  • js
  • less
  • metadate
  • scss
  • sprites
  • svgs
  • webfont
  • atribution
  • LICENSE

 

その中から、「webfont」というフォルダーをクリックしましょう。

 

f:id:slash1196:20210816105437j:plain

すると中には、「fa-brand-400」、「fa-regular-400」、「fa-solid-900」というsvgファイルがありますね。

 

そちらをクリックして、インポートしましょう。

 

手順③必要なアイコンだけをチェックする

f:id:slash1196:20210816105609j:plain

次に必要なアイコンだけをチェックしていきましょう。

 

手順④設定をして、アイコンをダウンロードする

f:id:slash1196:20210816105635j:plain

次に設定をして、アイコンをダウンロードしましょう。

 

右下の「Generate Font」をクリックします。

 

そして、画面の上部にある「Preferences」をクリックしましょう。

f:id:slash1196:20210816105710j:plain

 

すると以下のような画面になりますね。

f:id:slash1196:20210816105909j:plain

チェックを入れる項目は以下の通り。

 

  • support IE 8
  • support IE 7& IE 6
  • Include metadata in fonts
  • Use i (for selecting<i>)

 

上記を選択して、「Download」をクリックします。

 

手順⑤ダウンロードしたデータをサーバーにアップロードする

f:id:slash1196:20210816110011j:plain

次にダウンロードしたデータをサーバーにアップロードしていきます。

 

downloadしたファイルの中から必要なファイルが以下の通り。

 

  • fonts
  • ie7
  • style

 

こちらをサーバーにアップロードしましょう。

 

この時に気を付けたいのは同じ改装に保管することですね。

 

手順⑥CSSに読み込ませる

次にCSSに読み込ませていきましょう。

 

<head></head>内に保存したスタイルシートの呼び出しを入れます。

 

以下のような感じ。

 

<head>
<link rel="stylesheet" href="fonts/style.css">
</head>

 

手順⑦HTMLで<i>タグを使って呼び出す

最後にHTML編集画面で、<i>タグを使って書いていきます。

 

以下のような感じ。

 

<i class="fa-check>&nbsp;</i>○○○○

 

 そのあとプレビューの時に、ちゃんと反映されていたら問題なしですね。

 

方法②画像としてアイコンを使う

2つ目の方法は画像としてアイコンを使う方法ですね。

 

手順は以下の通り。

 

  • 手順①必要なアイコンを画像として取り込む
  • 手順②取り込んだアイコンにURLを設定する
  • 手順③htmlで入力する。

 

では詳しく見ていきましょう。

 

手順①必要なアイコンを画像として取り込む

必要なアイコンをPNGやSVGといった画像として取り込みます。

 

サイトはいくつかあり、以下の通り。

 

 

上記あたりがおすすめ。

 

そしてみたサイトでアイコンをPNGかSVGかでダウンロードしましょう。

 

手順②取り込んだアイコンにURLを設定する

次に取り込んだアイコン画像にURLを設定しましょう。

 

この時に使うツールは、Dropboxを使うのがおすすめですね。

 

で共有からリンクを作って、URLを設定しましょう。

 

※ドロップボックスの使い方に関しては、【はてなブログ】記事中に動画を埋め込む方法を一挙解説! にて詳しく説明しているので、ご確認ください。

 

手順③ブログ側でHTMLで入力する。

次にHTMLで入力していきましょう。

 

必要なコードは以下の通り。

 

HTMLコード

<img src="画像url" alt="" width"" height="" loading="lazy" title="">

 

プレビューでちゃんと表示されていれば問題なしですね。

 

この方法の注意点

この方法の注意点は、やはり画像として取り込んでいるので色が変えられないところですね。

 

そのためにCSSやHTMLのstyle属性を使っても色は変えられないですね。

 

まあ色はダウンロード時に変更することが可能なので、色を変更してからダウンロードするようにするといいかもですね。

 

まとめ|fontawesomeを使わなくてもアイコンは使える

お疲れさまでした。

ここまでFontawesomeを使わないほうがいい話をさせていただきました。

 

Fontawesomeはアイコンフォントとしては非常に優秀です。

でも時間が表示速度的にはかなり問題があったりします。

 

ですからこれからの時代は必要なものを必要なだけ使うことが要求されているかもしれません。

 

ぜひやってみてはいかがでしょうか。

 

表示速度も速くなるしいいことだらけです。

 

かなりおすすめですよ。

 

ってことで今回はこの辺で。

また次回に。