2022-04-26

【Bloggerカスタマイズ】さよなら、Webアイコンフォント

Webアイコンフォント Font Awesome やめる 疑似要素 ブログ軽量化 Bloggerカスタマイズ

ブログで使っていたWebアイコンフォント(Font Awesome)をやめました。その理由と代替策について書いていきます。

Webアイコンフォントとは?

Webアイコンフォントはサイトやブログなど、Webページ上で文字と同じように使えるアイコンで

  • 拡大してもボケない
  • 色やサイズの調整が簡単
  • 重ねる、動かすなど加工も簡単

という優れもの。

Font Awesomeは、Webアイコンフォントを自分のページで使うためのサービスのひとつ。簡単に使えて種類も豊富、無料コースありと至れり尽くせり。

一方で、Font Awesomeは仕様上、自分のページで使っていないアイコンデータも読み込んでいることが気になっていました。

私が使っていたアイコンは3つか4つ。この数なら他で代用できるんじゃないか……?

というわけで、Webアイコンフォントの使用自体をいったんやめました。

繰り返しになりますがFont Awesomeのサービスそのものはとても良かったです。ただ、私にはちょっと過ぎたものだったという話。

Webアイコンフォントはやめるけど、アイコンは欲しい

Webアイコンフォントの代わりにしたのが疑似要素を使って画像をアイコンにする方法。

もともとWebアイコンフォントも疑似要素で表示させていたので(※Font Awesome5では非推奨らしい)中身を画像に置き換えた形です。

この時計の部分がそう。画像はドット絵で作っています。超軽量。

疑似要素はHTMLっぽいことをCSSでやる、というもので、今回使ったのはbeforeとafter。要素の前と後、それぞれに要素を付け足すことができます。

疑似要素 before:要素の前に付け足す

こんな感じ

2022.04.26

HTML

CSS

疑似要素 after:要素の後に付け足す

こんな感じ

リンク

HTML

CSS

とりまとめ:春のせい

以上、Webアイコンフォントをやめて、疑似要素でドット絵をアイコンにしたよという話でした。

1ヶ所手を入れ始めると色々気になってしまい、結果ブログ大改造になりました。

春ってブログ改造したくなりますね。逃避

同じカテゴリの記事はこちら

\Thanks for reading!/

あひるのドット絵あひるのドット絵あひるのドット絵