見出し画像

WebアイコンフォントをFont AwesomeからIcoMoonへ乗り換えた話

ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています太田ヒロシです。

これまでWebアイコンフォントはFont Awesomeを使っていたですが、どうも最近のイケてるサイトを見ているとFont AwesomeじゃなくてIcoMoonというのを使っているみたい。
ということで、zousanrecordsでもIcoMoonへ乗り換えることにしました。

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

文字として扱えるアイコンです。zousanrecordsでは各種SNSのアイコン

画像1

や、矢印

画像2

などに使っています。画像ではないので拡大縮小しても劣化がなく、CSSでカスタマイズもできるという利点があります。

IcoMoonへ乗り換える理由

Font Awesomeは導入が簡単で使い勝手も良かったですが、デメリットとして、
・実際に使うアイコンは数個なのに、1500ほどあるアイコンを一旦全て読み込むのでサイトが重くなりがち
・無料版だと使えるアイコンが限られる
などがあります。

逆に、IcoMoonのメリットとして
・使うアイコンのみサーバーにアップするので軽くすむ
・自作したsvg形式のアイコンを登録できる
などが挙げられます。

IcoMoon導入の流れ

詳しい導入方法は検索すればいくらでも出てくるので簡単な流れだけ

1.使いたいアイコンを選ぶ

画像3

2.使いたいものがなければsvg形式で自作、登録する

画像4

3.任意に各名称や登録番号を変更する

画像5

4.データをダウンロードする
5.ダウンロードしたファイルをサーバーにアップする
6.クラスで呼び出す

です。

まとめ

というわけで、zousanrecordsの先日のアップデートで実装しました。
自作した詳細ボタンの矢印も正しく表示されました。

画像6

--------------------------------------

zousanrecordsはクラシック演奏家からロックバンド、アイドルグループまで幅広いジャンルでご利用いただいております。
先日、無料版のダウンロード数が250を突破しました!

最近ではミュージシャンにこだわらず広くクリエイター、アーティストにも使っていただけるWordPressテーマ、(最近は劇団のホームページを作りました)

イベントの特設サイトに使えるWordPressテーマも作ってます。


この記事が気に入ったらサポートをしてみませんか?