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

公開日:2013/11/19 更新日:2013/11/19
すごく簡単で便利!Webフォント「Font Awesome」を使ってみたのサムネイル

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

ダウンロード

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

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

font_awesome.png

使用環境

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

  • 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/>の間に以下を記述する
  • <link rel="stylesheet" href="./font-awesome-4.0.3/css/font-awesome.css">
    

    上記の「href」で「font-awesome.css」の場所を指定し読み込んでいます。これによりFont Awesomeが使用できるようになります。「font-awesome.css」の場所は環境によって変わると思うので、適宜修正して下さい。

使う

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

font_awesome_icons.png

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

font_awesome_list.png

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

awesome_list.png

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

font_awesome_code1.png

関連記事

関連記事はまだありません。

開発アプリ

nanolog.app

毎日の小さな出来事をなんでも記録して、ログとして残すためのライフログアプリです。