すごく簡単で便利!Webフォント「Font Awesome」を使ってみた

Webページを作成する際にアイコンを使用する場合があると思います。今までならばアイコンの画像を用意していたのですが、アイコンを画像ではなく文字として使えるWebフォントがあることを知ったので実際に使ってみました。このWebフォントを使えば、アイコンの画像を用意する必要はなくなり、さらに文字として使用するため、cssの記述を変更するだけで色やサイズを自由に変更できて便利です。Webフォントを提供しているサイトはたくさんありますが、今回は「Font Awesome」を使用しました。

ダウンロード

ダウンロード先は以下になります。

Font Awesome

上記のURLにアクセスすると、以下の画面が表示されますので、画面内の「Download」をクリックしてFont Awesomeをダウンロードします。
font_awesome

使用環境

また、使用環境は下記の通りになります。

  • Webサーバ:ubuntu13.04にインストールしたApache2
  • Webページのhtmlファイル(ここではindex.htmlとします)の場所:/var/www/index.html
  • Webページのcssファイル(ここではstyle.cssとします)の場所:/var/www/style.css


準備

使用するために必要な準備は非常に簡単で、下記だけでOKです。

  • 1:ダウンロードしたzipファイルを適当な場所で解凍する
  • ここでは、ダウンロードしたzipファイル「font-awesome-4.0.3.zip」を /var/www/ に解凍します。すると、/var/www/に「font-awesome-4.0.3」というフォルダができます。

  • 2:htmlファイルの<head>と<head/>の間に以下を記述する
  • 上記の「href」で「font-awesome.css」の場所を指定し読み込んでいます。これによりFont Awesomeが使用できるようになります。「font-awesome.css」の場所は環境によって変わると思うので、適宜修正して下さい。


使う

あとはアイコンを使うためのコードをhtmlファイルに追加することで使えるようになります。そしてFont Awesomeにどのようなアイコンが用意されていて、各アイコンを使うときに必要なコードは公式ページに全て掲載されています。
具体的には、まず用意されているアイコンのリストは、以下の画面の赤線枠の「Icons▼」をクリックする一覧が表示されます。
font_awesome_icons

以下のように用意されているアイコンが表示されます。
font_awesome_list

そしてこの中から使いたいアイコンを選んでクリックすると、
awesome_list

以下の赤線枠内にそのアイコンを使うためのコード(画面内の<i class=”fa fa-anchor”></i>”)が表示されるので、そのコードをコピペしてhtmlの好きな場所に貼付ければ使用できます。
font_awesome_code

このエントリーをはてなブックマークに追加

SPONSORED LINK

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL