Font Awesomeで Font を探す方法についてのご説明です。
アイコンの探し方
アイコンの探し方は２通りあります。
検索して探す
画面上部の検索ボックスへ英単語を入力して検索する方法です。
メリットは
単語を入れればすぐに出てくる
のですが、逆にデメリットは、
どういう名前か分からないときは使えない
ということ。
不明の場合は、画面の左側に用意してあるカテゴリー一覧から探し出します。
カテゴリー一覧から探す
一覧画面の左側には、カテゴリーリストがあります。
全て英語ですが、一応日本語に変換したリストをここへ紹介しておきます。
なお、将来的にFont Awesome のカテゴリーリストが変更になった場合は利用できなくなる可能性があります。
役立ちそうならTweetしてね♪
アイコンの装飾方法について
そのままの利用では味気ないので、いくつか変更の方法をご紹介します。なおサンプルは、Font Awesomeのサイトのものを利用しています。
【初心者さんへ】Class の中の記述に注目してね
HTMLもCSSもあやふや、の場合は難しいかもしれないけれど、
コピーしてきたHTMLとサンプルのHTMLを見比べてみてね。
例）コピーしてきたHTML
<i class="fas fa-camera"></i>例）サイズ変更で紹介されているHTML
<i class="fas fa-camera fa-xs"></i>class=”” のなかに書かれている内容が違いますよね。
ここでは、fa-xs が追加されています。
そこで、カスタムHTMLブロックを挿入し、その中へ記述します。
<i class="fas fa-camera"></i><i class="fas fa-camera fa-xs"></i>表示されましたか？
カスタムHTMLだとすぐにプレビュー表示ができるから簡単ですよ♪
ただ、組み合わせなどになるとページプレビューでないと確認できないことあるから、その場合は保存してプレビューをしてみてくださいね。
サイズ変更 fa-xx
サイトで設定されているフォントサイズを基準に大きさが相対的に決まります。
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>特定の場所のフォントサイズを変更すれば、その範囲内での相対的なサイズへ変更されます。
例）Divボックス内のフォントサイズを強制的に0.5remに変更した時の変化。
<div style="font-size: 0.5rem;">
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
</div>固定幅にする fa-fw
アイコン幅を固定幅に固定して、列を整えます。主にリストなどで活躍します。
<div style="font-size: 2rem;">
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>※fa-fwの指定がない場合の表示（微妙に文字開始位置がずれている）
リスト内のアイコン fa-ul, fa-li
Cocoonでは予めリストアイコンを変更できるブロックが用意されています。
ここでは、その他のアイコンを使いたい場合のご紹介です。
- List icons can
- be used to
- replace bullets
- in lists
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>回転アイコン fa-xxx-xxx
アイコンの傾きを変更できます。
<div class="fa-4x">
<i class="fas fa-snowboarding"></i>
<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>
<i class="fas fa-snowboarding fa-rotate-270"></i>
<i class="fas fa-snowboarding fa-flip-horizontal"></i>
<i class="fas fa-snowboarding fa-flip-vertical"></i>
<i class="fas fa-snowboarding fa-flip-both"></i>
</div>| Class | 傾き |
|---|---|
fa-rotate-90 | 90° |
fa-rotate-180 | 180° |
fa-rotate-270 | 270° |
fa-flip-horizontal | 水平方向へ反転 |
fa-flip-vertical | 垂直方向へ反転 |
fa-flip-both | 水平・垂直方向へ反転 (5.7.0以上必要) |
アイコンのアニメーション化 fa-spin fa-pulse
特定のアイコンはアニメーションを追加することができます。
<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
</div>| アイコン | HTMLタグ | |
| アスタリスク | <i class="fas fa-asterisk"></i> | |
| 原子 | <i class="fas fa-atom"></i> | |
| 証明書 | <i class="fas fa-certificate"></i> | |
| サークルノッチ | <i class="fas fa-circle-notch"></i> | |
| コグ | <i class="fas fa-cog"></i> | |
| コンパクトディスク | <i class="fas fa-compact-disc"></i> | |
| コンパス | <i class="fas fa-compass"></i> | |
| コンパス | <i class="fas fa-compass"></i> | |
| 十字線 | <i class="fas fa-crosshairs"></i> | |
| ダルマチャクラ | <i class="fas fa-dharmachakra"></i> | |
| ファン | <i class="fas fa-fan"></i> | |
| ハイカル | <i class="fas fa-haykal"></i> | |
| 救命浮輪 | <i class="fas fa-life-ring"></i> | |
| 救命浮輪 | <i class="fas fa-life-ring"></i> | |
| パレット | <i class="fas fa-palette"></i> | |
| リング | <i class="fas fa-ring"></i> | |
| スラッシュ | <i class="fas fa-slash"></i> | |
| スノーフレーク | <i class="fas fa-snowflake"></i> | |
| スノーフレーク | <i class="fas fa-snowflake"></i> | |
| スピナー | <i class="fas fa-spinner"></i> | |
| ストロープワフェル | <i class="fas fa-stroopwafel"></i> | |
| 太陽 | <i class="fas fa-sun"></i> | |
| 太陽 | <i class="fas fa-sun"></i> | |
| 同期する | <i class="fas fa-sync"></i> | |
| 同期する | <i class="fas fa-sync-alt"></i> | |
| 陰陽 | <i class="fas fa-yin-yang"></i> |