超人気の『Simplicity2』の後継『Cocoon』のデモサイトを兼ねています。

またつまらぬ物を作ってしまった。

Font Awesome Freeアイコン表 v5.8.1の事です。

最初、「Free>Accessibility、Alert、Animals、Arrows」くらいまで来た時に『?』と思った。
あれ?被ってなくない?

バッチリ重複しとります。
それでなくても、1,500個以上有るのに、重複したら何個作ればいいのか。。。

1日の苦労が台無しでしたが、ジャンル分けしたところで、英語がダメダメなわたしにゃ、あんまり意味も無い。
バッサリとデータをゴミ箱にインして、ABC順に作成し直しました。

下は、図1が Font Awesome>Free の公式の一覧表です。
図2は、アイコンをマウス右クリックで新規タブで開いたものです。

図2緑枠のアイコンをCSSで指定するためのコードだけなら、図1緑丸のどちらをクリックしても表示されます。
でも、わたしの欲しいのは本文中に記述するための図2赤枠のHTMLコードです。これは図1をどういじっても表示されないので、マウス右クリックで新規タブで開くという工程が必要です。
間違ってそのままクリックして、一覧表に戻ると1ページ目に戻ります。途中のページまで行っててその付近のアイコンも使いたかった場合、探すのが面倒です。
そこで面倒な作業なら1回で十分だと思い、作成したのが図3です。

使いたいアイコンのエリアにマウスオンすると赤枠の[Copy]が表示されるのでクリックすると、図2赤枠のHTMLコードと同じものだけをコピーします。

HTMLコード例:<i class="fab fa-accessible-icon"></i>

 

後から知ったのですが、Cocoonには Font Awesome 4 が装備されていて、それも同時に使えます。

Awesome 4:  <i class="fa fa-arrow-right"></i>
Awesome 5:  <i class="fas fa-arrow-right"></i>
タイトルとURLをコピーしました