10分で完了!ウェブフォントアイコン Font Awesomeの使い方

ウェブフォントアイコンを使えば、いちいち画像ファイルを用意しなくても、おしゃれなアイコンを表示させることができます。

ウェブフォントアイコンを使うには、アイコンファイルを公開フォルダに設置して利用しますが、ウェブのヘッダー部分にリンクを貼るだけで使えてしまうものもあります。

今回はリンクを貼るだけで簡単に使えてしまう Font Awesome を紹介します。

Font Awesomeを使う準備

CDNサーバからフォントデータを読み込む

アイコンの選択方法

Font Awesome(http://fortawesome.github.io/Font-Awesome/) のページから使いたいアイコンを探します。

Font Awesome のホームページ

Font Awesome アイコン選択
ホームページのメニューの Icons をクリックします。

アイコン一覧

Font Awesome フォント
アイコンが一覧になっているので、使いたいアイコンをクリックします。

タグの取得

Font Awesome アイコンのHTML
アイコンページが表示され、下の方にHTMLが表示されています。

アイコンのHTML

これをファイルに貼り付ければアイコンが表示されます。

色・大きさなどの変更

上記の iタグ を spanタグ などで囲みます。囲んだタグのクラス名を sample とします。
あとは CSS で sample に効果を与えればフォントの色・大きさなどが変わります。

XHTML

CSS

リンクを貼るだけで使えて、フォントと同じようにスタイルシートで装飾するだけです。

一度使うと手放せなくなります。



Author: webmaster