アイコンフォントとは
アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。
アイコンフォントの使い方
Font Awesomeを例にしてCDN(Contents Delivery Network)での使用方法を説明します。
CDN で Font Awesomeを利用するにはhead内に以下のコードを記述します。
＊4.2.0は執筆現在のバージョンです。適用するバージョンに合わせてください。
使用例
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
注意：href属性の値でhref=”//netdna〜のような書き方をするとサーバー上では問題なくリンクできますが、ローカルではうまくリンクできません。
ローカルの場合は、href=”http://netdna〜とします。
アイコン表示のための記述は、まず以下のページに移動してください。
http://fortawesome.github.io/Font-Awesome/icons/
使用したいアイコンを選択します。
次にiタグが表示されているところをコピーして自分のページのアイコンを表示する場所にペーストします。
アイコンサイズを変更するにはCSSで変更することもできますが、クラス名で変更することができます。
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
くるくる廻るアイコン
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i>
詳細な使用方法はこちらを参考にしてください。Font-Awesome examplesページ（英語）
疑似要素で使用する方法
「:before」や「:after」などの疑似要素でアイコンフォントを指定する方法があります。
HTML側にクラスの設定をしなくても使えますので知っておくと便利に使用できます。
「:before」や「:after」などの疑似要素はcontentプロパティを組み合わせてHTMLにテキストを付け加えることができる裏技的なものです。
ここでは「:before」を例にアイコンフォントの導入方法を説明します。
先頭にアイコンフォントを表示させたい要素をセレクタで指定します。
これは通常のCSS設定同様に要素名やクラス名、id名などで指定します。
contentの指定は使用したいアイコンフォントの指定番号をバックスラッシュ \ の後に続けます。（Windowsでは¥を使用）そしてこれらはダブルクオテーション ” で囲みます。
アイコンフォントの指定番号がわかりにくいですが本家ページの以下図の赤枠内に書かれています。
次に、font-family: FontAwesome;を指定しておきます。これがないとうまく表示されません。
ここまでが基本の表示方法です。後は必要に応じてcolorやfont-weight、font-styleそして、display:block、marginなどの設定もできます。
「:before」を使用した例
HTMLコード
<p class="plane">AAA</p>
CSSコード
.plane:before{
content:"\f072" ;
font-family: FontAwesome;
}
ちょっと複雑にしたCSS例
.plane:before{
content:"\f072" ;
font-family: FontAwesome;
color: gold;
font-size:400%;
margin:20px;
}
疑似要素にアイコンフォントを指定する場合font-family: FontAwesomeを指定することがポイント
コメントを投稿するにはログインしてください。