人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

アイコン型Webフォント「Font Awesome」で楽々素敵なリストを作ろう!【Stinger5】

   

はじめに

「リストをかっこよくしたい!」けど、「画像をいちいち作るのはめんどくさいな…」
そんな時は、アイコン型Webフォントを使ってみてはいかが?

今回紹介するのは「Font Awesome」です。

font awesome
すっごく簡単に使える上に、フォントの数も479(バージョン4.2.0)と豊富。
ほぼ(よほど特殊なアイコン以外)はそろってるんじゃないかな〜?

IE7に対応させたい人は、旧バージョンの 3.2.1 を使うといいようです。
旧バージョン 3.2.1 の使用方法(英語)

Step 1

htmlのheadの中に下記コードを記入。Webフォントを呼び出します。

ダウンロードして使うこともできますよ。トップページにダウンロードボタンがあります。http://fortawesome.github.io/Font-Awesome/

Stinger5を使っている人

おめでとうございます。上記コードはすでに「header.php」に埋め込まれています。だから、この行程はすっとばしちゃってください。

Step 2

後は、自分がアイコンを表示したい(html内)箇所に、下記の様なコードを入れます。

「fa-camera-retro」の部分は、自分の選んだアイコン名に変更。

Iconsページに一覧が掲載されています。(下図参照)
Font Awesome Icons

 

Examplesページ」にはオプションの設定方法が記載されています。大きさも変更することができますよ!

上記コードの「fa-lg」の部分を先程の基本形に追加すれば、文字のサイズが大きくなります。他のサイズは「Examplesページ」を参照してください。

htmlをさわらず、CSSの疑似要素で制御したい

htmlをさわらずに、cssのみだけで何とかならんかなぁ〜?って方、オッケーです。

特にwordpressを使っていたら、htmlを書き換えるのは面倒ですよね。
疑似要素で制御しちゃいましょう。

アイコンのユニコード確認方法

「Iconsページ」> アイコン一覧から好きなアイコンを選択 > クリックすると各アイコンの個別ページにとびます。

fa-angellist  Font Awesome Icons

上記画像の赤枠のところがユニコードです。

contentの中に、ユニコードの始まりを示す「¥」、そして調べたユニコードを書けば出来上がり。

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

 

 - Stinger, web便利機能, WordPress, スマホサイト

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事