Font Awesome

概要

  • Font Awesome は、様々な絵文字をウェブフォントの仕組みを使って利用できるようにした ウェブフォントと CSSライブラリです。
  • リンク先から「Download」をクリックして、モーダルウィンドウの一番下「No thanks, just download Font Awesome」 をクリックしてアーカイブを取得。取得した font-awesome-4.7.0.zip を展開して、fonts を サイトの /fonts にコピー、css の font-awwsome.min.css を /css にコピーして、html の head に以下を記述すれば利用可能。
  • CDN を使う方法もある。
  • 例えば、こんな感じ。
  • (2018/6/22:追記) 6月20日に、version 5.1.0 にアップデート。色々パワーアアプしてる模様。このページのアップデートは、これから考える。

本家


その他のアイコン

  • RPG Icon … RPG世界観のアイコン。使えるのは少ないけど、少数魅力的なアイコンあり。
  • Genericons Neue … 少ないけど感じは良い。
  • Foundation Icon Fonts 3 … Fontawesone とかぶってるな。
  • Fontisto … これは、ちょっと個性的。

参考サイト



効果

基本

faとアイコンの名前を使用して、どこにでも Font Awesome を置くことができます。 Font Awesomeは、インライン要素で使用するように設計されています。

fa-camera-retro<i class="fa fa-camera-retro fa-lg"></i>

Larger 拡大

コンテナとの相対的なアイコンサイズを大きくするには、fa-lg(33%増加)、fa-2x、fa-3x、fa-4x、またはfa-5xクラスを使用します。

<i class="fa fa-camera-retro fa-lg">
<i class="fa fa-camera-retro fa-2x">
<i class="fa fa-camera-retro fa-3x">
<i class="fa fa-camera-retro fa-4x">
<i class="fa fa-camera-retro fa-5x">

Fixed Width Icons 固定幅

fa-fwを使用してアイコンを固定幅に設定します。 さまざまなアイコンの幅が navリストやリストグループのように整列させるときに使用するのに最適です。

home
book
<i class="fa fa-home fa-2x fa-fw"></i> home<br/><i class="fa fa-book fa-2x fa-fw"></i> book

List Icons リスト

fa-ulとfa-liを使用すると、ul のデフォルトの箇条書きを簡単に置き換えることができます。

  • List icons
  • can be used
  • as bullets
  • in lists
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>

Bordered & Pulled Icons

fa-borderとfa-pull-rightまたはfa-pull-leftを使用すると、簡単な引っ張り引用符や記事アイコンを表示できます。

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past. <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i> ...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.



FontAwesome Icon

  New Icons in 4.7


  Web Application Icons


  Accessibility Icons


  Hand Icons


  Transportation Icons


  Gender Icons


  File Type Icons


  Spinner Icons


  Form Control Icons


  Payment Icons


  Chart Icons


  Currency Icons


  Text Editor Icons


  Directional Icons


  Video Player Icons


  Brand Icons


  Medical Icons