CSS・CSS3 2014-12-22

商用利用無料のWebアイコンフォント【Font Awesome】使い方

font-awesome

Webアイコンフォント【Font Awesome】の使い方を紹介したいと思います。
【Font Awesome】では、手軽にWebアイコンフォント利用でき、利用も無料(商用無料)で479個(2014/12/22)のアイコンフォントが利用できます。
また、アイコンフォントを利用すれば、Retina Displaysも気にすることがありませんし画像などを利用するよりも表示が軽く、CSSで簡単にアイコンフォントを装飾が可能です。
Webアイコンフォント利用するなら【Font Awesome】だよ、というぐらい素晴らしいです。
利用は、ファイルをダウンロードして利用する方法とCDNを利用して利用する方法があります。
基本的にどちらでもいいと思いますが、CDNの方が利用しやすいと思います。

Font Awesome

Webアイコンフォント使い方

今回は、【CDN】での使い方を記載したいと思います。
また、詳しい説明も下記にリンク先に記載してあります。

Get Started with Font Awesome

必要ファイルの読み込み

下記コードをhead内に挿入します。
最新のバージョンを利用したい方は、こちらよりご確認下さい。

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

利用したいアイコンフォントを決める

上記の必要ファイルを読み込んだら、次に利用したいアイコンフォントを決めます。
下記リンク先にアクセスして479個あるアイコンから探しましょう。(正直ありすぎて迷いますけど)

Font Awesome Icons

font-awesome1

利用したいアイコンが、決まったらアイコンをクリックします。
そうしますと下記画像のような画面に移動します。

font-awesome2
<i class="fa fa-wordpress"></i>

上記画像のiタグをコピーして利用したい場所に貼り付けます。
また、上記画像の【Unicode】についてですが、こちらは特定のクラス名やID名にFont Awesomeのアイコンフォントを利用したい時に必要となってきます。
.ico-wordpressのa要素に、Font Awesomeのアイコンフォントを利用したい場合は、上記のUnicodeを、content:に記載します。

.ico-wordpress a:before{
	font-family: FontAwesome;
	padding-right:3px;
	content: "\f19a"/*←にUnicodeの数字を貼り付ける*/
	}

または、下記リンク先の【Cheatsheet】でもご確認頂けます。

Cheatsheet

オプション・追加クラス名など

Font Awesomeでは、追加でクラス名を付加するだけでアイコンフォントの大きさなどを簡単に変更が出来ます。
フォントの大きさ以外にも、アイコンフォントをアニメーションで動かしたり、回転させたりなどがあります。
詳しくは、下記のリンク先ページのサンプルコードなどでご確認下さい。

Font Awesome Examples

ライセンス

最後にコードとフォントのラインセンスです。
下記のようなライセンスになっています。
リンク先よりご自身の目でご確認下さい。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS search-form-customize

CSSとJSで検索フォームをカスタマイズするコード 5+

NEXT wp-icon-fonts

WordPressのカスタムメニューにアイコンフォントを表示させる方法