読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

アイコンを付けてデザインする

アイコンフォントを利用できるようにする

アイコンを表示する

  • bootstrapの指定は、class名で指定する
時計のアイコン
  • class名「fa fa-clock-o」を付ける
<li class="fa fa-clock-o"></li>
フォルダーのアイコン
  • class名「fa fa-folder-open」を付ける
<li class="fa fa-folder-open"></li>
  • 各文字列の先頭に表示されるよう記述する
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>

<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( '' ); ?>
</span>
</div><!-- /.postinfo -->


アイコンの色を指定する
.postinfo i {
  color: #AAA;
}


HTML5の新要素「i」

  • それまでの「italic」の略ではなく、別の解釈で使うように指定されています
  • 慣用句や雰囲気の異なる語句を他と区別したいときに使う
  • 「パルパブル・コンテンツ (Palpable content)」というカテゴリーに属する
  • 要素を空の状態で指定して、後からCSSスクリプトでコンテンツを挿入することが認められています