Font Awesomeとは何か？
Font Awesome(オーサム)とは、Web上で用いるのに便利なフォントセットで、非常に多くのアイコンを表示できます。ビットマップでなくベクターアイコンなので、表示サイズを変えても汚くなったりしません。
まずは登録
ここではフォントのダウンロードをせず、CDN(Content Delivery Network)を用いたいと思います。この時点でのFont Awesomeのバージョンは 5.10.2 (1,535 Free Icons / 7,020 Pro Icons)。初めてFont Awesomeを使う場合の手順になります。
まずは、Font Awesomeのサイトを開きます。
-
Font Awesome
https://fontawesome.com/
有料の方は99ドル/年です。まずは無料で使いたいので Start for Free をクリック。
Get Started for Freeというタイトルのページに移行します。Enter your email to create your first kit! となっているので有効なメールアドレスを入力し、Send Kit Code
をクリック。
Check Your Emailと表示されるのでメールを見に行きましょう。
Confirm Your Font Awesome Account Email AddressというタイトルのHTMLメールが届いているので、この中のClick to Confirm Your Email Address + Set Things Upをクリックします。
次のページは、パスワードの設定です。新規パスワードを2つ、同じものを入力します。
Set Password&Continueをクリック。
今度はLet’s Get to Know You Betterというタイトルのページです。名、姓、Font Awesomeをいつから使っているのかと来て、最後の設問は、お気に入りのFont Awesomeアイコンは得られましたか？でしょうか。初めてならHaven’t used it yetでよさそうですね。そして、All set. Let’s go!をクリック。
これでKit’s Codeが得られます。
-
<script src="https://kit.fontawesome.com/
[Kit's Code].js"></script>
これを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。
使ってみる
Font Awesomeのサイトにサインインし、上のメニューからIconsを選ぶとアイコン一覧が表示されます。左のメニューからFreeを選びましょう。Pro用アイコンが消えて見やすくなります。
使いたいアイコンを見つけたらクリックします。選んだアイコンが大きく表示されます。ここでStart Using This IconをクリックするとStart Using Font Awesomeというタイトルのウィンドウがポップアップして、HTMLのコードが表示されます。右端のCopy HTMLというボタンでコード全体がコピーされます。範囲指定の必要がないのは便利。
-
<i class="fas fa-camera"></i>
このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。
なお、右上に設置されたアイコン Open account navigation をクリック、Kitsを選ぶとKitの一覧(Your Kits)が得られます。ここで歯車のアイコン(Settings)を選ぶとKitの設定が変更できます。ここに Technology の設定があり、 Web Font と SVG とを切り替えることができます。デフォルトではWeb Fontです。他に大事なのはEnable Version 4 Compatibility あたりでしょうか。デフォルトの設定は互換性重視になっています。ここでの操作だけで設定が変更できるのも便利。
色と大きさを変えてみる
<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 48px; color: Dodgerblue;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 3rem;"> <span style="color: Mediumslateblue;"> <i class="fas fa-camera"></i> </span> </span>
モノはフォントなので、いろいろとできます。左のは3文字分の高さ(親基準)に指定。真ん中のは48×48ピクセルに指定。右のは3文字分の高さ(ルート基準)に指定。
相対的に大きさを変えてみる
<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 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>
<div style="font-size: 24px;"> <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>
| Class | Size | Other Notes |
|---|---|---|
| fa-xs | .75em | |
| fa-sm | .875em | |
| fa-lg | 1.33em | Also applies vertical-align: -25% |
| fa-2x | 2em | |
| fa-3x | 3em | |
| fa-4x | 4em | |
| fa-5x | 5em | |
| fa-6x | 6rm | |
| fa-7x | 7em | |
| fa-8x | 8em | |
| fa-9x | 9em | |
| fa-10x | 10em |
サイズ指定用のクラスがこれだけあります。
アイコンの幅を揃える
<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を含めるとアイコンの幅が揃い、メニュー等に使いやすくなります。
アイコンをリスト中に含める
- 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-ulとfa-liを含めると、「・」がアイコンに置き換わります。
アイコンを回転させる
<div class="fa-4x"> <i class="fas fa-snowman"></i> <i class="fas fa-snowman fa-rotate-90"></i> <i class="fas fa-snowman fa-rotate-180"></i> <i class="fas fa-snowman fa-rotate-270"></i> <i class="fas fa-snowman fa-flip-horizontal"></i> <i class="fas fa-snowman fa-flip-vertical"></i> <i class="fas fa-snowman fa-flip-both"></i> </div>
| Class | Rotation Amount |
|---|---|
| fa-rotate-90 | 90° |
| fa-rotate-180 | 180° |
| fa-rotate-270 | 270° |
| fa-flip-horizontal | 水平方向に反転する |
| fa-flip-vertical | 垂直方向に反転する |
| fa-flip-both | 垂直及び水平方向に反転する (5.7.0以上が必要) |
アイコンのアニメーション化
<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>
fa-spinクラスを用いるとアイコンが回転します。fa-pulseクラスでは 8 ステップで回転します。この用途には、fa-spinnerおよびspinnerカテゴリのアイコンが向いています。
境界線とアイコンの配置
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further…
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
<i class="fas fa-quote-left fa-2x fa-pull-left"></i> Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further…
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i> Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
fa-pull-leftで左、fa-pull-rightで右にアイコンが配置されます。また、 fa-borderでアイコンの境界線が描かれます。
アイコンの積み重ね
<span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-4x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-camera fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i> </span>
<i class="far fa-circle fa-2x"></i> <span class="fa-stack" style="vertical-align: top;"> <i class="far fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x"></i> </span> <span class="fa-stack" style="vertical-align: top;"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> <i class="far fa-circle fa-2x"></i>
<style>
.fa-stack { font-size: 0.5em; }
i { vertical-align: middle; }
</style>
<i class="far fa-circle"></i>
<span class="fa-stack">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle"></i>
まとめ
やはり、色と大きさを簡単に変えられるのは便利ですね。これをビットマップでやろうと思ったら、非常に大変なことになります。
[Top]
Copyright © 2019
y.ohm / Yoshimasa Ohmuro / 大室 喜正
e-mail :
y.ohm@ohmix.net
PGP Public Key :
DH/DSS