無料版をカテゴリー毎に分けていますので、ご自身のサイトに合うアイコンを探してみてください。
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コードは画面左下の下記ボタンからもコピーできます。
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
コメントを残す