アイコンフォント

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

cssの準備 (header.phpに記述するのが簡単)
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

使い方は iタグを用いて <i class=”fa fa-book”></i> とするだけです。
(クラスfa はAwesome v4 を使う宣言、fa-bookはフォント種類)
詳細は [これまでのWG]-[HPWG 基礎コース] の アイコンフォント をご覧ください。(参考 layout_pro、hpwg.css)

Font Awesomev4 フォントの種類⇒ Icons Cheatsheet

Font Awesome の色々な利用法

• 主なフォントのクラス
  fa-camera　 fa-book　 fa-calendar　 fa-envelope　 fa-phone　 fa-mobile　 fa-fax　 fa-home　 fa-map-marker　 fa-file-pdf-o　 fa-file-word-o　 fa-file-excel-o　 fa-file-image-o　 fa-youtube-play
• フォントサイズのクラス
  fa-lg　 fa-2x　 fa-3x　 fa-4x　 fa-5x　
• メニューの項目にアイコン (html)
  

  <i class="fa fa-home fa-fw cred"></i><span class="cnavy">ホーム</span>

• アイコンList (css)
  

  /*list*/
  ul.lstfont1, ul.lstfont2{list-style:none; padding:0; margin:0 0 0 .75em;}
  ul.lstfont1 li, ul.lstfont2 li{line-height:1.3em; position:relative; padding:0 0 .25em 1.25em; margin:0;}
  ul.lstfont1 li:before, ul.lstfont2 li:before {
    position:absolute;
    left:0;
    font-family: FontAwesome;
    content: '\f138'; /* (>) */
    color:#CF5C78; /*赤系*/
  }
  ul.lstfont2 li:before {content:'\f0a4';} /* 右手 */
  ul.lstfont3, ul.lstfont4, ul.lstfont5 {list-style:none; padding:0 0 0 .75em; margin:0 0 0 .75em;}
  ul.lstfont3 li, ul.lstfont4 li, ul.lstfont5 li{line-height:1.3em; position:relative; padding:0 0 .25em 1.1em; margin:0 0 0 .1em;}
  ul.lstfont3 li:before, ul.lstfont4 li:before, ul.lstfont5 li:before{
    position:absolute;
    left:0;
    font-family: FontAwesome;
    content: '\f28d'; /*fa-stop-circle*/
    color:#00589B; /*青系*/
    font-size:75%;
  }
  ul.lstfont4 li:before{content: '\f152';} /* [>] */
  ul.lstfont5 li:before{content: '\f05b';} /*fa-crosshairs*/

固定幅のアイコン

アラート

fa-exclamation-triangle ここに記事ここに記事

fa-info-circle ここに記事ここに記事