読者です 読者をやめる 読者になる 読者になる

アイコンフォント

Webフォントは、Webサーバー上に置かれたフォントファイルをダウンロードして表示するCSS3の機能です。

アイコンフォントのメリット

  • フォントなのでテキストとのベースラインが合わせやすい。
  • 大きさや色はCSSでコントロールできる
  • ベクターデータなので拡大しても劣化がない

アイコンフォントを利用できるサイト

Font Awesome

Font Awesome, the iconic font and CSS toolkit

 

IcoMoon App

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

 

Genericons

Genericons - a free, GPL, flexible icon font for blogs!

 

Foundation Icon Fonts 3

Foundation Icon Fonts 3 | Playground from ZURB

 

Font Awesomeを使ってみる

Font AwesomeのCDNページ

Font Awesome · BootstrapCDN by MaxCDN

 

以下をHTMLに張り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

 

CDNを使用する時はバージョンに注意しましょう。新しいアイコンを使用した時に、ここが古いバージョンのままだと表示できません。

 

アイコンの選択

メニュー「Icons」の「Directional Icons」の中から”arrow-up”を選択してみます。

f:id:develog:20161013003044p:plain

HTMLへ貼り付け

この記述を利用したいところに張り付けます。

<i class="fa fa-arrow-up" aria-hidden="true"></i> 
フォントサイズと色を変える
<p style="font-size:24px; color:#FFF;"><i class="fa fa-arrow-up" aria-hidden="true"></i></p>
回転させる
90度回転 <i class="fa fa-arrow-up fa-rotate-90" aria-hidden="true"></i>
180度回転 <i class="fa fa-arrow-up fa-rotate-180" aria-hidden="true"></i>
270度回転 <i class="fa fa-arrow-up fa-rotate-270" aria-hidden="true"></i>

 

 その他、アニメーションやアイコンの重ね合わせなどができます。

Font Awesome Examples