ちょっとしたWEBアイコンを作るのは色々と面倒です。そんな中でfont-awesome(https://fortawesome.github.io/Font-Awesome/)というWeb上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものを使うことで開発も楽になります。11月27日記事
イメージ
head内に以下のものを記述します。また独自にスタイルシートを適用したい方は独自に作ってください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
iタグは本来イタリックで使われていましたが、ここ最近斜体はスタイルシートで表現するなど方法が変わっています。 HTMLリファレンスによれば
<I>は非推奨要素ではありませんが、単にテキストの見栄えを指定するだけです。 このような目的にはできるだけスタイルシートを使用することが推奨されています。 スタイルシートでは、<span style="font-style: italic">~</span> などと記述します。また、強調することが目的の場合は<EM>タグの使用が推奨されています。
と書かれています。http://www.htmq.com/html/i.shtml
そのタグを使ってアイコンを表現していきます。また、iタグはインライン要素です。
使えるアイコン一覧はhttps://fortawesome.github.io/Font-Awesome/icons/
をご覧ください
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"><!--独自用--> <title>font-awesome</title> </head> <body> <h1>通常</h1> <ul> <li><i class="fa fa-male"></i> </li> <li><i class="fa fa-bars"></i> </li> <li><i class="fa fa-copyright"></i> </li> <li><i class="fa fa-cloud"></i> </li> <li><i class="fa fa-cloud-download"></i> </li> </ul> <h1>拡大</h1> <ul> <li>文字<i class="fa fa-arrow-right fa-2x"></i>文字</li> <li>文字<i class="fa fa-arrow-right fa-3x"></i>文字</li> <li>文字<i class="fa fa-arrow-right fa-4x"></i>文字</li> </ul> <!--独自に作ったCSSを読み込みそれをクラスとして追加する。--> <h1>色変更</h1> <ul> <li><i class="fa fa-male gray"></i> </li> <li><i class="fa fa-bars gray"></i> </li> <li><i class="fa fa-copyright gray"></i> </li> <li><i class="fa fa-cloud gray"></i> </li> <li><i class="fa fa-cloud-download gray"></i> </li> </ul> <h1>テキストシャドー+色変更</h1> <ul> <li><i class="fa fa-male gray shadow"></i> </li> <li><i class="fa fa-bars gray shadow"></i> </li> <li><i class="fa fa-copyright gray shadow"></i> </li> <li><i class="fa fa-cloud gray shadow"></i> </li> <li><i class="fa fa-cloud-download gray shadow"></i> </li> </ul> <h1>色変更+縁取り</h1> <ul> <li><i class="fa fa-male white bordering"></i> </li> <li><i class="fa fa-bars white bordering"></i> </li> <li><i class="fa fa-copyright white bordering"></i> </li> <li><i class="fa fa-cloud white bordering"></i> </li> <li><i class="fa fa-cloud-download white bordering"></i> </li> </ul> </body> </html>
CSS
@charset "utf-8"; /* CSS Document */ .gray { color: #CCC; } .white { color: #FFF; } .shadow { text-shadow: 1px 1px 1px #000000; } .bordering { text-shadow: -1px -1px #088, 1px -1px #088, -1px 1px #088, 1px 1px #088; }
色変更やtext-shadowも使えるので自分なりにアレンジしてクラスを作り、それを適用していくと色々と楽しめると思います。
以上