Pocket

沢山のアイコンを簡単に利用できるWebアイコンフォント「Font Awesome」の使い方

  • add this entry to hatena bookmark

Webページでちょっとしたアイコンを使いたいケースは結構あると思います。

今回記載するWebアイコンフォント「Font Awesome」を使うと、様々なベクターアイコンを簡単に使えます。

「Font Awesome」を使う為の環境準備も、CDNを使う場合は非常に簡単です。

1.環境設定

今回はCDNを利用します。

以下の Bootstrap CDN ページを確認し、最新のCSSパス情報を入手します。

http://www.bootstrapcdn.com/#fontawesome_tab

本日時点では以下のパスでした。

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

このパスを使って、Font Awesome を使うWebページのheadタグ内に、以下を追加します。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

以上で、環境設定は完了です。

2.利用コーディング

それでは早速使ってみます。

利用できるアイコン一覧が公開されていますので、使いたいアイコンを選びます。

http://fortawesome.github.io/Font-Awesome/icons/

使いたいアイコンをクリックすると、利用する為のタグが表示されます。
今回選択したアイコンのタグは以下でした。

<i class="fa fa-database"></i>

このタグをWebページ内に記載すると以下のアイコンが表示されます。

ちょっとカスタマイズします。大きく表示します。

<i class="fa fa-database fa-5x"></i>

以下が大きくしたアイコンです。

スタイル設定も出来るので、色なども設定できます。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

チェックサイト RSS Feed読者登録はいかがでしょうか?RSS配信中です。