![]() |
![]() |
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、アイコンフォントを利用してアイコンを利用する方法ご紹介します。
おちゃのこネットでは、fontawesomeの4.7を読み込んでいます。
簡単なHTMLタグでアイコンを挿入することが可能です。
![]() |
|
![]() |
![]() |
自由記入欄やHTMLタグ利用可能エリアに下記のHTMLタグをコピーして貼り付けてください。
アイコンフォントについては、下記のサイトのアイコンが利用できます。
https://fontawesome.com/v4.7/icons/
※使い方
fa-から始まるコードをコピーして貼り付けるだけです。
例)fa-address-book
<div class="iconfont">
<i class="fa fa-file-text" aria-hidden="true"></i>
<i class="fa fa-paper-plane" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は最下部にお願いします。
フォントの大きさや色は文字サイズで指定します。
.iconfont .fa {
font-size: 40px;
color: #000000;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.