アイコンフォント例

CSSの準備 style sheetへのリンクを記述

アイコンフォントとは、ウェブページ上で文字扱いとして表示できるアイコンのことです。(実態は文字フォント)
画像のアイコンと違って、文字ですから色(color)やサイズ(font-size)も自由に変えることができます。
ここでは有名な｢Font Awesome(フォントアッサム)v4.7.0｣を用います。
使い方は iタグを用いて とするだけです。
(クラスfa はAwesome v4 を使う宣言、fa-bookはフォント種類)











 Loading...

 Waiting...




固定幅のアイコン

 ホーム  ライブラリー  アプリ  設定
 ホーム, fa-home, fa-fw, my-blue  ライブラリー, fa-book, fa-fw  アプリ, fa-pencil, fa-fw, my-red  設定, fa-cog, fa-fw

List Icons

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

  • List icons
  • can be used
  • as bullets
  • in lists

アラート

fa-exclamation-triangle, alert-success, color#3c763d, background#dff0d8, border#d6e9c6

fa-info-circle, alert-info, color#31708f, background#d9edf7, border#bce8f1

fa-exclamation-triangle, alert-warning, color#8a6d3b, background#fcf8e3, border#faebcc

fa-exclamation-triangle, alert-danger, color#a94442, background#f2dede, border#ebccd1