アイコンをWebフォントで表示できる「Font Awesome」の使い方!

2015/07/19

こんにちは。
今回はアイコンをWebフォントで表示できる「Font Awesome」の使い方!です。

先日、アイコンをWebフォントで表示できる「Font Awesome」を使う機会があったので紹介します。

アイコンをWebフォントで表示できる「Font Awesome」の使い方!

Font Awesome

font-awesome

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

 

「Font Awesome」の使い方

まずは、head内に下記を記述します。

 

下記のサイトにアクセスし、表示させたいアイコンをクリックします。
http://fortawesome.github.io/Font-Awesome/icons/

 

クリックしたら、そのアイコンのページが表示されます。
左下くらいにあるコードをコピーして、表示させたいサイトに貼り付けるだけです。
このバスのアイコンだと下記のコードになります。

font-awesome2

 

サイズや色を変えたい時はCSSでfont-sizeやcolorを指定すれば変更できます。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。簡単に表示させる事ができるのでいいですね。
以上でアイコンをWebフォントで表示できる「Font Awesome」の使い方!でした。

topへ戻る