キャリコ

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

  関連記事

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

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

忍者 AdMax が Google AdSense よりも稼げる理由
忍者 AdMax の年間平均クリック単価は62円?!

そんなバカな、キャリコ( @calicocatxyz )です。 実は忍者 AdM …

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

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

個人アカウントとどう使い分けてる?SNS との付き合い方
個人アカウントとどう使い分けてる?SNS との付き合い方

SNS とは付かず離れずの関係、キャリコ( @calicocatxyz )です。 …

カエレバなどで楽天ボタンを表示してるブログは要確認。その商品は本当にオススメ出来る?

こんにちは、キャリコ( @calicocatxyz )です。 先日こんな記事を目 …

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

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

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

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

なければ作ればいい!アイコン型ウェブフォントが自作できる IcoMoon

イギリスで一人暮らしをするかもしれないキャリコ( @calicocatxyz ) …

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

HARIBO を買ったつもりが HALALBO でちょっとショック、キャリコ( …

nend を1年間掲載してみてわかった平均クリック単価

nend は稼げない、キャリコです。 冒頭から夢のないことを言っちゃいますが… …