フリーアイコン「Font Awesome」の使い方：ステップ２～基本編その１

１. ステップ２～基本編その１

「Web Fonts with CSS」は Font Awesome が提供しているフレームワーク(アイコン集＋アイコン表示ツール)のひとつです。ステップ１～導入編では、「Web Fonts with CSS」の導入方法について述べました。このページでは「Web Font with CSS」の基本的な書き方をHTML周りを中心に話を進めていきます。

２．Font Awesome の基本的な文法

　Font Awesomeのアイコンを表示するための基本的なHTMLの書き方をざっと見ていきましょう。

2-1. 基本形

<i class=”fas fa-star”></i>　→　

　HTML要素の<i>タグに、class属性で2個のクラスを指定して、 <i> と </i> の間には何も書かずに</i>で閉じます。2個のクラスのうち、fas クラスはアイコンの描き方を決めています。fa-star は描くアイコン名です。「fas fa-star 」は「塗りつぶしで描く、★を 」になります。

2-2. 描き方クラスの fas、far、fab

<i class=”fas fa-bell”></i>　→　

<i class=”far fa-bell”></i>　→　

<i class=”fab fa-amazon”></i>　→　

　「描き方」のクラスには、fas、far、fab があります。Font Awesome のすべてアイコンに3種類の描き方が対応しているわけではなく、その都度対応しているかどうかを調べる必要があります。また、有料版では、fal、fad も利用できます。

2-3. クラスを追加してアイコンを飾る

<i class=”fas fa-star fa-2x …”></i>　→　

　class属性にクラスを追加することによって、アイコンに色を付けたり大きくしたり動かしたりすることができます。クラスは、あらかじめ Font Awesome のアイコン用に用意されているものもあれば、自分で作成して追加することもできます。fa-2x は大きさを2倍にする用意されたクラスです。「fas fa-star fa-2x」は「塗りつぶしで描く、 ★を 、大きさ2倍で」となります。

2-4. クラスの並び順は自由

「fas fa-star fa-2x」も
「fa-2x fas fa-star」も
「fa-star fa-2x fas」も
「fas fa-2x fa-star」も
どの並び順でも表示は同じです。class属性内のクラスの並び順を変えても、表示は変わりません。

2-5. style属性でスタイリングが可能

<i class=”fas fa-heart” style=”color:red; “></i>　→　

　<i>タグに style 属性を追加して、普通のテキスト文字と同じようにアイコンをスタイリングすることができます。

2-6. <i>タグ以外でも

<span class=”fas fa-glasses”></span>　→　

　HTML要素の<i>タグを Font Awesome では推奨していますが、<i>タグが必須ではありません。<i>タグの代わりに、<span>タグやその他のHTML要素を使ってもアイコンフォントを表示することはできます。

３．Font Awesome のスタイリング基本クラスその１

　 Font Awesomeではあらかじめアイコンをスタイリングするクラスが複数用意されています。

3-1. アイコンのサイズを変更する

　基本形 <i class=”fas fa-anchor”></i> にアイコンの大きさを変更するクラスを追加します。アイコンのサイズを変更するクラスは13個が用意されていて、使用中のフォントの相対倍率で表示されます。サイズを指定しない場合は、使用中のフォントサイズになります。

 <i class="fas fa-anchor fa-xs"></i>
 <i class="fas fa-anchor fa-sm"></i>
 <i class="fas fa-anchor fa-1x"></i>
 <i class="fas fa-anchor fa-lg"></i>
 <i class="fas fa-anchor fa-2x"></i>
 <i class="fas fa-anchor fa-3x"></i>
 <i class="fas fa-anchor fa-4x"></i>
 <i class="fas fa-anchor fa-5x"></i>
 <i class="fas fa-anchor fa-6x"></i>
 <i class="fas fa-anchor fa-7x"></i>
 <i class="fas fa-anchor fa-8x"></i>
 <i class="fas fa-anchor fa-9x"></i>
 <i class="fas fa-anchor fa-10x"></i>
 

 <div><i class="fa-2x fas fa-swimmer"></i>　１．水泳</div>
 <div><i class="fa-2x fas fa-wheelchair"></i>　２．車イス</div>
 <div><i class="fa-2x fas fa-blind"></i>　３．目の不自由な人</div>
 <div><i class="fa-2x fas fa-biking"></i>　４．オートバイ</div>
 <div><i class="fa-2x fas fa-female"></i>　５．女性</div>
 <div><i class="fa-2x fas fa-restroom"></i>　６．おトイレ</div>
 

 <div><i class="fa-fw fa-2x fas fa-swimmer"></i>　１．水泳</div>
 <div><i class="fa-fw fa-2x fas fa-blind"></i>　３．目の不自由な人</div>
 <div><i class="fa-fw fa-2x fas fa-biking"></i>　４．オートバイ</div>
 <div><i class="fa-fw fa-2x fas fa-female"></i>　５．女性</div>
 <div><i class="fa-fw fa-2x fas fa-restroom"></i>　６．おトイレ</div>
 

 <div class="fa-2x">
  <i class="fas fa-horse"></i>
  <i class="fas fa-horse fa-rotate-90"></i>
  <i class="fas fa-horse fa-rotate-180"></i>
  <i class="fas fa-horse fa-rotate-270"></i>
  <i class="fas fa-horse fa-flip-horizontal"></i>
  <i class="fas fa-horse fa-flip-vertical"></i>
  <i class="fas fa-horse fa-flip-both"></i>
 </div>
 

 <div class="fa-2x">
  <i style="color: #ffcc33;" class="fas fa-bell"></i>
  <i style="color: tomato;" class="fas fa-heart"></i>
  <i style="color: green;" class="fas fa-tree"></i>
  <i style="color: skyblue;" class="fas fa-snowflake"></i>
  <i style="color: #ffcc33; background-color: yellow" class="fas fa-bell"></i>
  <i style="color: tomato; background-color: pink" class="fas fa-heart"></i>
  <i style="color: green; background-color: #99ff99" class="fas fa-tree"></i>
  <i style="color: skyblue; background-color: #ccffff" class="fas fa-snowflake"></i>
 </div>
 

 <i class="fa-pull-left fa-3x fas fa-quote-left"></i>
 <p>・・・ 文章 ・・・</p>
 

 <i class="fa-3x fa-border far fa-arrow-alt-circle-right"></i>