概要
此処のところ立て続けに「CSS3」を使うカスタマイズ記事ばかり書いていますが
過去記事でも触れましたが古いブラウザのサポート終了に伴い…
もう記事にしても良いだろう…ってな感じ…なのが主因です…
なので…今更感は完全に無視して……「Font Awesome」です
インライン要素に「CSS Class」を指定するだけで簡単にアイコンを表示出来て…
しかも 「Webフォント」ですから…「CSS3」で様々な装飾が出来ます…
静的コンテンツではサイト内検索フォームとパンくずリストで使用しています…
jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト
Bloggerで自作パンくずリスト(Bread Crumb/Topic Path)をボタン化してスタイリッシュにする
パンくずリストをHTML要素のマウスホバー時に光源がカーソルに追従するエフェクトで実装する
導入
「Bootstrap」から「CDN」が提供されていますのでお手軽ですね…
Blogger での記述は…こんな感じにします…
黃文字部分はバージョン番号です…
- <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>
最新バージョンを確認して適宜入れ替えて下さい…
「<head>～</head>」
…の間に置きますが…
元々速い「CDN」とは言え…
置く場所によって読み込み速度が…
僅かですが違いますので…
「CSS」の前に記述しましょう…
カスタム「CSS」
アイコンの表示色は…「Webフォント」ですからサイトの文字色に依存しますので…
文字色「#c0c0c0」より明るくしてマウスホバー時に色も変化させています…
「font-family:'FontAwesome'」は…
- .fa{color:#fff;font-family:'FontAwesome'}
- .fa:hover{color:#5ff}
後述する「Unicode」を使わない場合は必要ありません…
アイコンによっては…少しだけ傾けて表示したいアイコンもあるでしょう
その場合は…別途「CSS」のクラス名を割り当てる事になります…
…ってな感じだと…右に「20」度傾ける設定です…
- .degrees20{-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg)}
個別にアイコン色を設定する事も出来ます…
…ってな感じですね…サンプルです…
- .アイコン名{color:色名}
「20」度傾けて色が「#f55」で「1.3」倍サイズ…
色が「#ff5」で「1.3」倍サイズ…
「HTML」マークアップ
上記…サンプルのマークアップ…
アイコン名は冒頭のリンクページの上部「Icons」から確認して下さい…
- <i class="fa fa-exclamation fa-lg fa-fw degrees20"></i>
- <i class="fa fa-exclamation-triangle fa-lg fa-fw"></i>
「Font Awesome」では…「<i>」タグを使ってマークアップしていますが…
「<span>」など…基本的にインライン要素なら OKです…
サイズのサンプルです…
「fa-lg」は…約…1.3倍です…「fa-2x」は…2倍…ってな感じです…
- <i class="fa fa-home fa-fw" title="Home"></i>
- <i class="fa fa-home fa-lg fa-fw" title="Home-lg"></i>
- <i class="fa fa-home fa-2x fa-fw" title="Home-2x"></i>
- <i class="fa fa-home fa-3x fa-fw" title="Home-3x"></i>
- <i class="fa fa-home fa-4x fa-fw" title="Home-4x"></i>
- <i class="fa fa-home fa-5x fa-fw" title="Home-5x"></i>
「fa-fw」は…アイコンに幅を持たせて幅を揃えるクラス名です…
タイトル属性は…ツールチップを表示させない場合は不要です…
ツールチップは…デフォルトではなく別途設定しています…
「jQuery」「jQuery UI」第８回「Tooltip」マウスホバーでカーソルに追随して情報を表示
まぁ…マークアップ方法は「Examples」ページに…
懇切丁寧に記述されていますので参照して下さい…手抜きです
「サイズ」「アイコンに幅を持たせる」「リスト表示」「枠線と文字の回り込み」
「スピン」「回転」「アイコンを重ねて表示」…などなど…解説されています…
「Font Awesome」の「Examples」ページ
Tips / 「Unicode」で使う場合と…アイコンの「Y軸回転」
Unicode
サーチアイコンの場合…
…のように記述します…黃文字部分が「Unicode」です…
- <i class="fa fa-lg fa-fw"></i>
「Unicode」は…「Cheatsheet」ページで取得出来ます…
「Font Awesome」の「Cheatsheet」ページ
さしてメリットも無いように感じるでしょうが…例えば…
当サイトのヘッダーやサイドバーに置いてあるサイト内検索フォームなど…
「input」の「type="submit"」での「value」属性の部分…
つまり…通常…「検索」「Search」「Submit」などの文字列が…
ボタン上に表示されていますが…タグが使えない場面でも…
カスタム「CSS」のように…「font-family:'FontAwesome'」を設定しておけば…
「value」属性に「Unicode」を直書き出来てアイコンが表示されます…
なんか…サイト内検索フォームの…
クオリティがアップした感じがしますよね σ(^_^;)
過去記事で書いたエフェクトに適用させていますので…
jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト
ヘッダーのサイト内検索フォームの「HTML」を置いておきます…
ヘッダーのサイト内検索フォームの「HTML」
Y軸回転
Y軸で回転する「CSS」を適用させると…マウスホバーすると回転します…
Hover Me!!
Y軸で回転する「CSS」
- <i class="fa fa-cube fa-3x fa-fw mawaru"></i>
おわりに…
前後の投稿へのリンクに使ったりすると…確実に「オサレ」度アップですね…
トップへ戻るスクリプトの画像などにも使えますね…
jQuery UI Extra-7 : クリックするとスルスルとスクロールしてトップに戻るスクリプト
絵文字の補完以外にも…使い処はアイデア 次第でたくさんあるでしょう…
「Webフォント」アイコンは…「CSS3」で出来る事は実装出来ますので…
是非とも…色々とチャレンジしてみて下さい…
頻繁に使うアイコンは…定型文管理ソフトに登録しておくとお便利です…
Clibor / クリップボード履歴と定型文管理ソフト
以上です…最後までお読みいただきましてありがとうございます…
「Font Awesome」を画像で使いたい方はこちらの記事をどうぞ…
「Font Awesome」の「query strings」問題を「CSS Sprites」で解決するために画像に変換する
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿