ちょっとしたWEBアイコンを作るのは色々と面倒です。そんな中でfont-awesome(https://fortawesome.github.io/Font-Awesome/)というWeb上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものを使うことで開発も楽になります。11月27日記事

イメージ



目次



スタイルシートをCDNで読み込み

head内に以下のものを記述します。また独自にスタイルシートを適用したい方は独自に作ってください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



アイコンを表示させるためのiタグ

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

  1. 一つはfont-awesomeのCDNを記述
  2. 一つは独自に記述(以下に記述)
    @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も使えるので自分なりにアレンジしてクラスを作り、それを適用していくと色々と楽しめると思います。

以上

最終更新:2015年11月27日 20:39
添付ファイル