2015年9月21日

WEBアイコンのFont Awesomeを活用しよう。Stinger5ならすぐ使えます。

スポンサードリンク

 Font Awesomeを是非使いましょう。

可愛いアイコンから、企業のアイコンまで。
無料で使えて、見栄えが非常に良くなります。

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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク