WEB アイコンフォント Font Awesome をCSSのcontentで使う方法

PR

WEB アイコンフォントって何?

フォントにはPCで使うフォントとサーバー上に存在するWEBフォントがあります
WEBフォントは無料のものと有料のものがあります

日本語だと有料のしか今のところ見たことがありませんが
英語だと1000以上のWEBフォントが存在しているようです

WEBフォント中でも特殊なのが WEBフォントアイコン
通常のフォントとは少し様相が違います

 

WEBフォントアイコンは、文字ではなくアイコン 画像が表示されるフォントです
使い方も通常のフォントと違います

今回はWEBフォントアイコンの Font Awesome をCSSのcontent:””;で使う使い方の紹介です

 

Font Awesome を CSS の content で使う方法

下準備

まずは、WEBをダウンロードもしくは CDNのものを使ってHTMLで読み込みます

ダウンロードはこちらのページから出来ます
http://fortawesome.github.io/Font-Awesome/get-started/

 

一番簡単な方法は CDN を利用することです

 

HTML

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

これを、HTMLの<head></head>の間に追加します
CSSファイルを読み込むのと同じやり方です

これでHTML側の設定は完了です

 

CSSのcontentでWEBアイコンフォントを使う

span:after {
	content: " \f0ab";
	font-family: FontAwesome;
}

まず、font-family に FontAwesome として WEBフォントを指定します
そしてcontentの中は \f0ab となっています
\の部分は 文字のユニコードの始まりを示します

円マークに見えたり、スラッシュの逆に見えたりしますが
これはフォントに依存します

一般的なキーボードのBack Spaceの左にあるキーの半角入力です

 

基本的な使い方はこのような形になります
文字のunicodeは WEBアイコンフォントのアイコンのページで見ることが出来ます

 

アイコン一覧ページ
http://fortawesome.github.io/Font-Awesome/icons/

 

アイコンの個別ページ

WS002411

 

アイコンの個別ページにある unicodeが書かれた部分

WS002412

ここにある unicode: これがアイコンを指定するのに必要です
youtubeのアイコンの場合は f167 となっていますね

これを先ほどのを付け加えて \f167 として CSSのcontentに記入すれば表示されます

 

動的にコンテンツが作られていくサイトとかには
CSSでアイコンを入れるようにしたほうが効率がいいしHTMLのコードもスッキリするので

そういった場面に使える方法です

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー