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

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

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

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

f:id:webmaster-web:20160708003800p:plain

CDN
  • アイコンフォント
  • HTMLにclass名を設定するだけで、簡単にアイコンを表示できます

アイコンを表示する

  • 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 -->


《プレビュー》

f:id:webmaster-web:20160708005540p:plain

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


《プレビュー》

f:id:webmaster-web:20160708005923p:plain

HTML5の新要素「i」

  • それまでの「italic」の略ではなく、別の解釈で使うように指定されています
  • 慣用句や雰囲気の異なる語句を他と区別したいときに使う
  • 「パルパブル・コンテンツ (Palpable content)」というカテゴリーに属する
  • 要素を空の状態で指定して、後からCSSスクリプトでコンテンツを挿入することが認められています
/* 記事の付加情報 */
.postinfo {
  font-size: 14px;
}
.postinfo a {
  color: #000;
  text-decoration: none;
}
.postinfo i {
  font-size: 14px;
  color: #AAA;
}


《プレビュー》
f:id:webmaster-web:20160708011413p:plain