可愛いアイコンから、企業のアイコンまで。
無料で使えて、見栄えが非常に良くなります。
Bloggerでも使えるそうですね。
私はWordPressで使用しています。
Font Awesomeを使ってサイトにアイコンを貼る
必須という訳ではありません。
が、アイコンがあると注目されやすく、
ユーザーにとっても分かりやすくて良いですよ。
Font Awesomeのアイコンはこちらから。
http://fortawesome.github.io/Font-Awesome/icons/
まずFont Awesomeを自分のサイトで使えるようにしなければなりません。
Font Awesomeのファイルをダウンロードして、
サーバーにアップロードする方法がひとつ。
もうひとつは、
CDNでFont Awesomeを利用するという方法です。
詳しくはよく分かりません。
私はStinger5のテーマを使用していて、
Stinger5では元々Font Awesome のファイルを使えるようにしてくれています。
何ともありがたい話。
FontAwesomeの新しいバージョンがあります。
そのままでも構いませんが、新しいアイコンを使いたい方は
header.phpを変更する必要があります。
詳しくはこちら。
[Stinger5]Pocketのアイコンが表示できないよ! という時はFont Awesomeのバージョンを見直そう
Font Awesomeの使い方
Font Awesomeの設定から、
サイトで使用する方法まで、詳しく載せてくれているサイトがあります。
こちらです。
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
とても分かりやすく、
これ以上詳しく載っているサイトを今のところ見つけていません。
何ともありがたい話。
Font Awesomeコードの使い方、例
例として、タグのマークのアイコンを見てみます。
http://fortawesome.github.io/Font-Awesome/icon/tag/
php等に貼り付けるのはこんな感じになります。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<i class="fa fa-tag">ここに文字を入れても良いよ</i>
大きさを変えたり、
90度傾けたり、
回転させたり(ロード中のマークとかに使う)、色々できます。
こだわり過ぎるとキリがないので程々でいいでしょう。
:before、:after要素に使いたい等細かい設定もできる
こだわりたい派の方はこのサイトをどうぞ。
凄く分かりやすい説明があります。
フォントアイコンの使い方 (FontAwesome)
もちろん、CSSで指定もできます。
良く使うと思いますので、こちらもコードを載せておきます。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
.ここに指定したい場所:before {
content: "/f02b";
font-family: FontAwesome;
font-size: 20px;
color: #666;
position:relative;
top:2px;
margin-left:2px;
margin-right:3px;
}
色や大きさ、位置等を細かく指定出来ます。
良いように変えて下さい。
指定した場所の文字の、頭文字の前にアイコンが表示されます。
ポイントは
content: "/f02b";
ですね。
これは何かと言うと、
http://fortawesome.github.io/Font-Awesome/icon/tag/
のページにある、Unicode: f02bと同じコードを載せた訳です。
これでタグのアイコンがサイトに表示されます。
何度やっても表示されない、という方は、
ページの再読み込みをして下さい。
F5ボタンを押せばOK。
キャッシュデータをクリアしても良いです。
それでも読み込めなければ、どこかで失敗しています。
FontAwesomeのファイルの指定が出来ていなければ、
当然アイコンが表示されません。
ここについては、私も分からないです。
色々ググッて頑張って下さい。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録