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

2022-04-26

ブログで使っていた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

.example::before{
  content:'';
  display:inline-block; /*横に並べる*/
  width:12px; /*幅を指定*/
  height:12px; /*高さを指定*/
  background-image:url(画像のURL);
  background-size:contain; /*縦横比を維持*/
  vertical-align:middle; /*隣と揃える*/
  background-repeat:no-repeat; /*繰り返さない*/
  position:relative; /*位置調整*/
  top:-2px; /*位置調整 縦*/
  right:2px; /*位置調整 横*/
  }

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

こんな感じ

リンク

HTML

CSS

.example::after{
  content:'';
  display:inline-block; /*横に並べる*/
  width:12px; /*幅を指定*/
  height:12px; /*高さを指定*/
  background-image:url(画像のURL);
  background-size:contain; /*縦横比を維持*/
  vertical-align:middle; /*隣と揃える*/
  background-repeat:no-repeat; /*繰り返さない*/
  position:relative; /*位置調整*/
  bottom:-2px; /*位置調整 縦*/
  left:2px; /*位置調整 横*/
  }

とりまとめ：春のせい

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

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

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