ホームページを作成するのにとっても重宝するアイコンフォント。
画像で作成するのは時間がかかるし、データも重たくなりがち。
そんなわけでサイドメニューやグローバルメニューのアイコンとして重宝しております。
例えばこのショッピングバッグ。
<i class="fa fa-shopping-bag"></i>
と好きな場所に記述するだけでアイコンフォントが出現するはずなのです。
しかし今回立て続けに異なるアイコンフォントが別のケースで表示されなかったものですから焦りました。
まずが表示できませんでした。
こちらの理由はアイコンフォントとテキストをdivで囲っていたのですが、その「padding」の関係でアイコンフォントが表示できない場所におしやられておりました。
次に最初にお見せしたショッピングバッグ。
他に正常に表示されているアイコンフォントが使われているタイトルなどのソースをそのままコピーして、アイコンフォントの種類だけ変更しても表示されません。
これには結構時間をついやしました。
わりと「特定の環境下でアイコンフォントが表示されない」というのは検索でひっかかって来たのですが、特定のフォントに対して表示されないとは書かれていないのです。fa-shopping-bagが表示できないとは書かれているサイトはありませんでした。
しかし調べていくうちにこちらのサイトで
http://rcmdnk.github.io/blog/2015/11/24/blog-octopress/#section
Font Awesome がアップデートされて20個程の新しいアイコンが新たに導入されました。
と書かれておりまして、追加されたものの中にショッピングバッグが。。。
なるほどそういう事だったのですね。
こちらのサイトには感謝です！
ちなみに追加されていたのは
- :
<i class="fa fa-bluetooth"></i> - :
<i class="fa fa-bluetooth-b"></i> - :
<i class="fa fa-codiepie"></i> - :
<i class="fa fa-credit-card-alt"></i> - :
<i class="fa fa-edge"></i> - :
<i class="fa fa-fort-awesome"></i> - :
<i class="fa fa-hashtag"></i> - :
<i class="fa fa-mixcloud"></i> - :
<i class="fa fa-modx"></i> - :
<i class="fa fa-pause-circle"></i> - :
<i class="fa fa-pause-circle-o"></i> - :
<i class="fa fa-product-hunt"></i> - :
<i class="fa fa-reddit-alien"></i> - :
<i class="fa fa-scribd"></i> - :
<i class="fa fa-shopping-bag"></i> - :
<i class="fa fa-shopping-basket"></i> - :
<i class="fa fa-stop-circle"></i> - :
<i class="fa fa-stop-circle-o"></i> - :
<i class="fa fa-usb"></i>
きちんとアップデートを確認しないとダメですね。
もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。
