ヒデヒデノート

思った事や出来事を書いてるweblogです

FontAwesomeを使う?使わない?と言う話

※現在はFontAwesomeは使わず、WordPressに搭載されてる『Dashicons』って言うアイコンフォントを使っています。


ブログのサイドバーのリスト部分で、「リストの先頭にアイコンフォント(FontAwesome)を表示してみたいなぁ」と思い、使い方をネットで調べたり(手持ちのwebデザイン本だと、HTMLで使う方法は書いてあるが、CSSで使う方法が書いてなかったので)。

FontAwesomeのiconをulやolのlist-styleに使う方法 – Qiita』を参考にCSSを書いてみる。…うーん、何故かアイコンが四角く表示されてしまう(四角いアイコンを使ってる訳ではないです)。

アイコンが四角く表示されてしまっているスクリーンショット
アイコンが四角く表示されてしまっている

何故四角く表示されてしまうのか調べてたら、『Font Awesome 5の使い方「CSS:before」でのunicode指定方法:CDN版』と言う記事を目にする。

よくよく読んでみると、多分「font-family」の所に「Font Awesome 5 Free」ではなく、「FontAwesome」って書いてたからだったんだろうけど、初見ではそれに気付かず。下の方に書かれてる『Font Awesomeが表示されない場合』を見て、「KIT版って何?」と思ったり。

KIT版が何なのか検索してみたら…どうやらFontAwesomeは、バージョン5.9以降ではメールアドレスを登録しないといけないとか(『Font Awesome の使い方(ver5.9以降) / Web Design Leaves』って記事に書いてあった)。登録するとKitってコードが発行されるらしい。

どうやら私は、今までCDNって方法でFontAwesomeを使ってたらしい。今でもCDNって方法でFontAwesomeを使う事は可能だが、今のバージョン(FontAwesome5の事だと思う)のFontAwesomeのCDNは廃止予定らしい。うーん、でもメールアドレス登録しないとなのはイヤだなぁ。

そこでフと思った。「古いバージョンだったら登録しなくても使えるのでは?そもそも古いバージョンが今でも使えるのかどうか知らんけど。」と。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう』って記事を見てみると、FontAwesomeの旧バージョンに飛べ、さらに</head>の直前に書くコードも書かれてたり。

そんなこんなで、古いバージョンのFontAwesomeを使って、リストの先頭にアイコンフォントを表示してみる。今度は上手くいきました。

旧バージョンのアイコンフォントを表示してみたスクリーンショット
旧バージョンのアイコンフォントを表示してみた

さて、FontAwesomeを5から4にすると、今まで使ってたSNSボタン(シェアボタン)が使えなくなるなと(HTMLとかを書き直さないといけない)。そんな訳で、FontAwesome4を使ったSNSボタンを作ってみる事に。…んー、本見て色々やってみたが、上手くいかない。

仕方ないので今まで使ってたSNSボタンの、『8種類のSNSフォローボタン・CSSカスタマイズ18選 | カゲサイ』を参考に、再び作ってみる事に。四角アイコンと丸アイコンの2種類作ってみたけど、今度はどちらも上手くいったみたいです。

上手くいったSNSボタンのスクリーンショット
上手くいったSNSボタン

上手くいったようなので、SNSボタンをコレに変えてみました。…ただFontAwesome4も、いつまで使えるかわからんよなーと(メールアドレス登録すれば今後も使えるんだろうけど)。

とりあえず今はこのまま使うけど、近い将来FontAwesomeを使わないSNSボタンに変えた方がいいかなと思ったり。リストもFontAwesomeを使わない、普通のリストにした方がいいかね。

…個人的には、FontAwesome使ったSNSボタンって、「はてなブックマークがわかりづらくないか?」と思ったりする。『B』とか『B!』よりも、『はてな』とか『はてブ』の方がわかりやすいよなーと。

「もう面倒臭いから、アイコンフォントじゃなくて普通のテキストリンクでよくね?」とか思ったり。…そもそも、ツイートしたりブクマしたりする人は、ボタンとかなくてもツイートしたりブクマしたりするよなと。
(追記・なので結局、アイコンフォントを使わないSNSボタンに戻しました。)



コメント

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれないコメントは無視されます(スパム対策)