「Font Awesome Icon」を使ってホームページをデザインする

Prev12 3 Next

最近個人のブログやホームページなどWebサイト上で、下記のシンプルなアイコン付のメニューをよく見かけています。これはウェブフォント(Web Font)の一種である「FontAwesome」を使ったものです。

以前はアイコンイメージを使って表現しましたが、この場合はイメージを拡大・縮小するときに、アイコン画像がギザギザになったりして制作に手間がかかって面倒でした。

しかし、この「FontAwesome Icon」はベクトル形式のため、拡大・縮小してもきれいなまま表示されます。

サイズや色などもCSSを使って簡単に調整・装飾が可能です。種類も600種類以上もあり、使い方もいたって簡単です。継続してアップデートが行われているので、使用可能なアイコン数も増えてきます。

Font Awesome 使用方法

Font Awesome を利用方法には、CDNコードを使った表示方法と、ファイルをダウンロードしてサーバーに置いて利用する方法の２つがあります。

1. CDNサーバー上のCSSファイルにリンクする

外部サーバであるCDNサーバー上のWebフォントを下記のリンク要素を使って、HTMLソースの<head>～</head>間の任意の場所に貼り付けます。

これは自分のウェブサーバ上にFont Awesomeを設置しなくても使えるというメリットがあります。

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>

次は下記のように<body>～</body>間に直接<i></i>タグとclass名を入れるだけです。

 <body>
  <i class="fa fa-subway"></i>
 </body>
</html>

結果、ページにはこのように「地下鉄」のアイコンが表示されます。⇒　

2. Font Awesomeフォントを自分のサーバーに設置する

CDNサーバーを利用しないで、Web Fontファイルを自分のサーバーに設置して使うこともできます。

まず「Font Awesome」フォントをダウンロードする

▼　公式ダウンロードサイトにアクセスして「Download」ボタンをクリックするとダウンロードできます。下記のようにZIP形式で圧縮されていますので、自分のパソコン上でフォルダを作ってそこにファイルを解凍します。

解凍したファイルを自分のサーバー上にアップロードする

自分のサーバー環境に合わせるためにフォルダ名やファイル名を変更する必要がなければ、そのまま丸ごとアップロードしたほうが簡単な作業になるかと思います。

自分のサーバー上の「相対パス」でリンクかける

フォントの読み込みが正常に機能するように、ファイルがアップロードされたサーバー上の正確なディレクトリ名を書き込みます。

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="../font-awesome-4.3.0/css/font-awesome.min.css"">
  </head>

これで、CDNサーバーを借りずに自由に利用できるようになりました。

これでは、CSSとの組み合わせでアイコン一つを作ってみましょう。

<!DOCTYPE html>
 <html>
  <head>
  <title>Icon Design(アイコンデザイン)  </title>
    <link rel="stylesheet" href="../font-awesome-4.3.0/css/font-awesome.min.css"">
   <style>
  .icon-design {
        width: 60px;
        height: 60px;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        border-radius: 30px;
        color: #ffffff;
        background-color: #089ee1;
        font-size: 30px;
      }
  </style>
 </head>
    
   <body>
 <p class="icon-design">   
  <i class="fa fa-cloud-download"></i>
 </p>  
 </body>
</html>

結果、クラウド・ダウンロードアイコンができました。

Cloud Download

Prev12 3 Next