Font Awesome
大橋 俊昭

2015.11.21HTML/CSS システム開発 

代表取締役

大橋 俊昭

「アイコンフォント」を活用しよう!!

肌寒い季節になりましたね、システムエンジニアの大橋です。これからもっと寒くなることを考えると、チョット憂鬱になります。

さて、今回は便利な「アイコンフォント」についてですが、皆さんは活用されていますでしょうか!?当然ながら「制作するべきもの」によって、使用有無を含めて判断になりますが、使い方を間違えなければ便利であることは言うまでもありません。

メジャーところは「Font Awesome」でしょうか!?

Font Awesome」では、さまざまなアイコンフォントが500種類以上も提供されています。Webフォントとして使用できるので、フォントサイズやフォントカラーをCSS制御することもできるわけです。便利ですよね。

Font Awesome

ライセンスを確認しておきましょう!!

フォントライセンスは「SIL Open Font License(OFL)」が適用されます。ライセンス形式を明示することにより、ほぼ自由に使用することができる、とても扱いやすいライセンスになります。

コードライセンス(CSSファイル等)は「MIT License」によりライセンスされています。「GPL License」のようなコピーレフトではありませんので、コードを一部修正したとしても開示する必要はありません。

結論としては、CSSファイル内にライセンス形式を明記すれば、ほぼ自由に使うことができるということです。安心ですね。

実際に使ってみましょう!!

今回は、アイコンフォントをダウンロードするのではなく、CDNを使用したサンプルで試してみました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <title>Font Awesome</title>
  </head>
  <body>
    <i class="fa fa-camera-retro fa-lg"></i> Camera(fa-lg)
    <i class="fa fa-camera-retro fa-2x"></i> Camera(fa-2x)
    <i class="fa fa-camera-retro fa-3x"></i> Camera(fa-3x)
    <i class="fa fa-camera-retro fa-4x"></i> Camera(fa-4x)
    <i class="fa fa-camera-retro fa-5x"></i> Camera(fa-5x)
  </body>
</html>

結果はこんなカンジ!!

Sample

使い方はとても簡単、ですが、500種類以上ものアイコンから目的のものを探し出すのは疲れますね!!<つづく>

ホームページ制作サービスはこちら
ページTOPへ