「FontAwesome Icon」でイメージアイコンを作る

Prev 123 Next

Font Awesomeの長所はアイコンがテキストとして認識されるので、サイズや色が自由に設定できることです。ウェブフォント(Web Font)は、下記の「Font Awesome」サイト内にて掲載されています。

お好きなアイコンの上にマウスを持っていて、そのアイコンをクリックすると6パタン(サイズ)のアイコンが展開します。

アイコン名やclass名などが記載されており、そのままコピーしてページ内の好きなところに貼り付けるだけで。種類も600種類以上もあり、使い方もいたって簡単です。

「Font Awesome」アイコンの基本表示方法

アイコンの表示方法にはいくつかありますが、タグにclass属性を指定する方法で簡単に表示できます。以下のようにi要素にclass属性を指定する方法が簡単です。

「fa」というclass名を必ず指定した上で「fa-****」のようなclass名を指定します。

「Font Awesome」のアイコンは、「テキスト型」なので、通常の文字と同様に、CSSを使ってサイズや色などの調整の指定が可能です。

HTMLソースの<body>～</body>間の任意の場所に貼り付けます。タグだけではなく、他の要素も使用可能です。

インライン要素以外に、要素などのブロックレベル要素にも使えます。ただし、はブロックレベル要素のため、段落の先頭にアイコンが位置します。

 <body>
  <i class="fa fa-cloud-download"></i>Cloud Download
 </body>

要素の結果、⇒　Cloud Download

 <body>
  <p style="padding-left:50px;color:#F90;" class="fa fa-cloud-download"></p>Cloud Download
 </body>
</html>

要素の結果、↓

Cloud Download

Font Awesomeアイコンを左右寄せ

「pull-right」「pull-left」のclass名をつけます。

 <body>
   <i class="fa fa-futbol-o pull-right"> </i>SOCCER
   <i class="fa fa-university pull-left"> </i>UNIVERSITY
 </body>

SOCCER UNIVERSITY

「Font Awesome」アイコンに枠線をつける

アイコン名の次に「fa-border」class名をつけます。

 <body>
   <i class="fa fa-futbol-o fa-border"> </i>SOCCER
   <i class="fa fa-university fa-border"> </i>UNIVERSITY
 </body>

SOCCER UNIVERSITY

複数の「Font Awesome」フォントを重ね合わせて一つに表示する

よく使われているのが、

 <body>
  <span class="fa-stack fa-lg">
   <i class="fa fa-twitter fa-stack-1x"></i>
   <i class="fa fa-square-o fa-stack-2x"></i>
 </span>
 ........
 </body>

「Font Awesome」フォントを使ってリスト作り

 <body>
 <ul class="fa-ul">
   <li> <i class="fa-li fa fa-check-square"> </i>HOME </li>
   <li> <i class="fa-li fa fa-check-square"> </i>LIST </li>
   <li> <i class="fa-li fa fa-spinner fa-spin"> </i>CIRCLEs </li>
   <li> <i class="fa-li fa fa-square"> </i>SHARE </li>
 </ul>
 </body>

HOME
LIST
CIRCLEs
SHARE

アイコンのアニメーション

リストメニュー作成

▼　以下のようにメニューリストのアイコンとしても使用できます。

Home Library Applications Settings

「FontAwesome Icon」でイメージアイコンを作る

関連ページ一覧