FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】

FontAwesome4.7のアイコンをクリックでコピーできる一覧表

WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。
自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。

2019-07-03: 日本語検索に対応しました
2019-02-23: AND/OR検索に対応しました 一覧表の使い方

スポンサーリンク

アイコン一覧・検索する

  • すべて
  • Webアプリケーション
  • アクセシビリティ
  • 交通機関
  • 性別
  • ファイル
  • スピナー
  • フォーム
  • 支払い
  • グラフ
  • 通貨
  • テキストエディタ
  • 矢印
  • プレーヤー
  • ブランド
  • 医療
  • 人/絵文字
  • SNS
  • 端末環境
  • カレンダー
  • +/-/×
  • 気象
  •  
  •  
  •  

一覧表の使い方

アイコンのスクリーンショット
  1. アイコンをクリックすると次のようなHTMLタグがコピーされます。
    <i class="fa fa-windows" aria-hidden="true"></i>
  2. 「windows」をクリックするとclass名fa-windowsがコピーされます。
  3. \f17aはCSSのcontentで使えるUnicodeです。
    ※¥が\に見えたりしますが同じ文字です。
  4. 検索ではclass名(fa-windows)やそれらしい日本語から検索できます。 
    「語句 語句」のように単語を半角スペースで区切る事でAND検索が出来ます。
    「語句 OR 語句」のように大文字のORで区切るとOR検索が出来ます。

ブランドロゴについて

Font Awesome IconsのBrand Icons項目を元に「ブランドロゴ」と表記・区分けしています。

よく見かけるシェアアイコン「」もブランドロゴに含まれているんですがこれはShareThisというサービスのロゴにも使われているデザインみたいです。
参考 意外なほど多く存在している「シェア」アイコンのスタイルと実際にどれを選ぶべきなのか – GIGAZINE

アイコンフォントの使い方

使い方を簡単にですが解説。

HTMLで表示する

コピーした<i>タグをコピペで表示出来ます。class名によってアイコンが変わります。

<i class="fa fa-font-awesome" aria-hidden="true"></i> FontAwesome
FontAwesome

Unicodeを使い表示する事も出来ます。\f2b4の場合&#xf2b4;と記述します。

<i class="fa" aria-hidden="true">&#xf2b4;</i> FontAwesome
FontAwesome

CSSで使う

contentにUnicodeを記述、フォントにFontAwesomeを指定します。

<span class="nico-chan">ニッコリ</span>
/* class="nico-chan"の文末にアイコン */
.nico-chan:after {
    content: '\f118';
    font-family: FontAwesome;
}
ニッコリ

もっと詳しい使い方を知りたい方はこちらのサイトがわかりやすいです。

あとがき

clipboard.jsを使いコピーしようと思ったら、iPhoneで画面がガクガク動いて使いづらかったので下記の参考リンクを元にコードを書きました。
どうもテキストエリアを選択する際一瞬フォーカスされるためスクロールされてしまうようです。

上記問題がなぜ起きるのか理解するのに時間がかかって大変苦労したのですが
結果的に、一番便利になったと思う部分は「デザインとして使おうと思ったらブランドロゴだった」という自体を避けられる事です。

苦労した部分とまったく関係ない!

動作確認

  • Windows/Chrome, Firefox, Edge
  • iOS12/Safari, Chrome

参考リンク

タイトルとURLをコピーしました