キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

Font Awesome の最新版 Version 4.2.0 を導入したアイコン型ウェブフォントの使い方

      2015/07/29

ああああああああ、ULTRA JAPAN に行きたすぎるキャリコ( @calicocatxyz )です。

このタイミングでどうして日本に帰れなかったのか… 次は Ibiza であるけど行ったばかりだし。。え、行っちゃう?行っちゃうの?友達に誘われたらノリで行ってしまいそうです ^^; さて、本日は前回のエントリーの補足です。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

アイコン型ウェブフォントを紹介したついでに、これで何が出来るのかを掘り下げてみようと思うにゃ。

リンクこれは便利!Retina で拡大・縮小しても美しいまま表示される魔法のアイコン

Ads by Google

Font Awesome

リンクFont Awesome

今回はキャリコでよく使っている Font Awesome のアイコン型ウェブフォントの使い方を紹介するにゃ。

header.php に記述する

STINGER5 の場合は元々『 <link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css” rel=”stylesheet”> 』の記述があるから【 4.0.3 】の部分を【 4.2.0 】に変えるだけにゃ。バージョンを最新版に変えることで新しいアイコン型ウェブフォントに対応することが出来るにゃ。

使い方

表示方法

アイコン型ウェブフォントの使い方は簡単にゃ。Font Awesome から使いたいアイコンを選んで表示したい場所にコードをコピペするだけにゃ。

例 )

サイズを変える

アイコン型ウェブフォントは拡大・縮小しても美しいまま表示されるのが特徴にゃ。

使用するクラス名

fa-lg 、fa-2x 、fa-3x 、fa-4x 、fa-5x

例 )


fa-lg( 約1,33倍 )
fa-2x( 2倍 )
fa-3x( 3倍 )
fa-4x( 4倍 )
fa-5x( 5倍 )

位置を揃える

使用するクラス名

fa-fw

fa-fw なしの場合
例 )

angellist
area-chart
at
bell-slash

なしの場合、アイコンの位置がバラバラにゃ。

fa-fw ありの場合
例 )

angellist
area-chart
at
bell-slash

リストマークとして使う

使用するクラス名

fa-ul 、fa-li

例 )

  • binoculars
  • area-chart
  • at
  • bell-slash

枠をつける

使用するクラス名

fa-border

例 )

例は見やすいようにフォントを fa-3x にして、青い背景だと見えないから白背景にしてるにゃ。

回り込みさせる

使用するクラス名

pull-right、 pull-left

例 )

アイコン型ウェブフォントの右側に回り込みさせる表示方法で、pull-right のクラスを使用すれば左側に回り込ませることが出来るにゃ。フォントサイズはわかりやすく fa-3x を使用してるにゃ。

回転させる

使用するクラス名

fa-spin

例 )

角度を変える

使用するクラス名

fa-rotate-角度、fa-flip-horizontal 、fa-flip-vertical

例 )

通常
90度
180度
270度
左右逆転
上下左右逆転

重ねて表示する

使用するクラス名

fa-stack 、fa-stack-1x 、fa-stack-2x 、fa-inverse

例 )

+ =




アイコンの外側に2倍の大きさのアイコンを重ねているにゃ。fa-inverse を使えば色を反転させることも出来るにゃ。

例 )

+ =




色を指定してこんなことも出来るにゃ。

例 )

+ =




CSS

まとめ

Font Awesome のアイコン型ウェブフォントの基本的な使い方はこんな感じにゃ。コピペで気軽に使うことが出来るしメリットばかりだから、これは使わない手はないにゃ。さらにプラグインを使えばもっと簡単に記事に挿入することが出来るにゃ。

リンクWordPressの投稿にFont Awesomeのアイコンフォントを使いたかったら「WP Visual Icon Fonts」が最も手軽

基本的な使い方を抑えたら、今度は CSS3 で応用することも可能にゃ!その辺はまた次回にでも…

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブサービス

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

Google+ ページを作って Google+ バッジを設置しよう

今年はサッカーかぶれのキャリコ( @calicocatxyz )です。 本田選手 …

ロリポップの FTP で2つ目の独自ドメインを設定する方法

イギリスのリーズに滞在中のキャリコ( @calicocatxyz )です。 東京 …

Facebook のファンページを作成してプラグインの Like Box を設置しよう

数日の入院が終わり無事に退院しました、キャリコ( @calicocatxyz ) …

pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法

週3でペペロンチーノを食べてるキャリコ( @calicocatxyz )です。 …

Twitter のフォローボタンとタイムラインプラグインを設置しよう

退院したはいいものの、2kg も太ったキャリコ( @calicocatxyz ) …

WordPress で「 下書きを保存しています… 」が永遠に終わらない原因はロリポップの WAF だった

STINGER5 以外のテーマを扱ってみたキャリコ( @calicocatxyz …

Web アイコン Font Awesome の最新版 Version 4.4.0 が公開
Web アイコン Font Awesome の最新版 Version 4.4.0 が公開

良いタイミングで気付いた、キャリコ( @calicocatxyz )です。 半年 …

eye
スマホ用クリック課金型広告【 nend 】をブログに導入しました

nend 導入、キャリコ( @calicocatxyz )です。 もっとお金が欲 …

eye
コピペで OK!バイラルメディア風オリジナル SNS ボタンの設置方法

思っていた以上に上出来、キャリコ( @calicocatxyz )です。 Fac …

軽いブラウザを比較した、おすすめの使い分け方法とは?
軽いブラウザを比較した、おすすめの使い分け方法とは?

ブラウザは使い分けるタイプ、キャリコです。 皆さんはブラウザを使い分けていますか …