Font Awesome 5自動作成ツール!アイコンを一覧表示しカスタマイズも楽々!

Font Awesome 5自動作成ツール!アイコンを一覧表示しカスタマイズも楽々!のアイキャッチ画像
2017年末にFont Awesome 5が公開されました。無料版と有料版が公開されましたが、無料版だけでも以前のバージョンからさらに増え、その種類はなんと900以上に!!

無料版をカテゴリー毎に分けていますので、ご自身のサイトに合うアイコンを探してみてください。

Font Awesome 5ではさらにアニメーション機能も追加され、幅広いカスタマイズが可能に!!

アイコンを選択しカスタマイズ項目を選択すると、画面下のプレビュー領域に即座に反映されますので、ご活用ください。  
 

Font Awesome自動作成ツールの使い方

  • head要素内に下記2つのコードを入れて下さい。

    Font Awesome 5に対応するコードです。

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

    アニメーションを使用するために必要なコードです。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
  • Font Awesome アイコン一覧からアイコンを選択します。選択すると画面下にプレビュー、HTMLコード、Unicodeが表示されます。
    ※アイコンを選択しなれけば表示されません。
  • Font Awesome カスタマイズからお好みでアイコンのカスタマイズ行います。
  • プレビューを確認し、問題がなければHTMLコードをご自身のサイトに貼り付けてください。
    HTMLコードは画面左下の下記ボタンからもコピーできます。

FontAwesomeの詳細な使い方は下記記事にまとめていますので、ご参考ください。
【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!のアイキャッチ画像

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!

2018年2月17日

Font Awesome アイコン一覧

Accessibility


Arrows


Audio & Video


Business


Chess


Code


Communication


Computers


Currency


Date & Time


Design


Editors


Files


Gender


Hands


Health


Images


Interfaces


Maps


Objects


Payments & Shopping


Shapes


Spinners


Sports


Status


Users & People


Vehicles


Writing



Font Awesome カスタマイズ


カスタマイズ項目 カスタマイズ明細
サイズ
回転
向き
反転
固定幅
ボーダー
アニメーション

HTMLコード





UNICODE




◆プレビュー表示◆



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です