すごく簡単で便利!Webフォント「Font Awesome」を使ってみた
Webページを作成する際にアイコンを使用する場合があると思います。今までならばアイコンの画像を用意していたのですが、アイコンを画像ではなく文字として使えるWebフォントがあることを知ったので実際に使ってみました。このWebフォントを使えば、アイコンの画像を用意する必要はなくなり、さらに文字として使用するため、cssの記述を変更するだけで色やサイズを自由に変更できて便利です。Webフォントを提供しているサイトはたくさんありますが、今回は「Font Awesome」を使用しました。
ダウンロード
ダウンロード先は以下になります。
Font Awesome上記のURLにアクセスすると、以下の画面が表示されますので、画面内の「Download」をクリックして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/>の間に以下を記述する
<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▼」をクリックする一覧が表示されます。
以下のように用意されているアイコンが表示されます。
そしてこの中から使いたいアイコンを選んでクリックすると、
以下の赤線枠内にそのアイコンを使うためのコード(画面内の<i class="fa fa-anchor"></i>")が表示されるので、そのコードをコピペしてhtmlの好きな場所に貼付ければ使用できます。
関連記事
関連記事はまだありません。