Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

画像を作るのが面倒!そんなときに使えるアイコンタイプのWebフォント(サンプル付き)

投稿日:

画像を作るのが面倒!そんなときに使えるアイコンタイプのWebフォント(サンプル付き)
アイコン一つで、見た目が良くなったりするときがあります。

でも、アイコン作るの面倒なときってありませんか?

今回、アイコンを作らなくてもアイコン表示できるWebフォントをご紹介します!

photo credit: mkhmarketing via photopin cc

Genericons

Genericons
http://genericons.com

よく使いそうな汎用的なアイコンを揃ったアイコンのパッケージです。
Webフォントとして配布しており、CSSによってアイコンのクラス名を使って色やサイズを自由に設定して使うことができます。

アイコンの種類

アイコンの種類

アイコンの種類は100種類を超えるほどありますのでいろいろな場面に使えます。

使い方 準備編

使い方 準備編

右上のダウンロードをクリックしてZipファイルをダウンロードします。
中には、cssファイルなど入っております。

ファイルの中身

Zipファイルの中のexample.htmlに使い方が書かれています(※英語です)

使い方 実践編

Zipファイルの中のgenericons.cssを表示させたいHTMLファイルのヘッダーの中にリンクさせてください。

<link href="genericons.css" rel="stylesheet">

※パスは、ご自身の環境に合わせてください。

使いたいアイコンを選びます。

表示させたいアイコンを選ぶ

今回は「時計」を選んでみます。
アイコンの時計(赤枠で囲った箇所)をクリックすると、上の黄色の箇所も時計になります。

表示させたいアイコンを選ぶ

Copy HTMLをクリックしてみます。

copy html

ポップアップでHTMLソースが表示されますのでコピーしてください。

copy html

<span class="genericon genericon-time"></span>

コピーしたソースを表示させたいHTMLに貼り付けます。

<body>

<div id="container">

<span class="genericon genericon-time"></span>

</div><!--container-->

</body>

表示ができました。

表示結果

そのほかの表示方法

表示結果

「アイコン + 文字」の形が良く使われますのでこの表示方法を試してみます。

<ul class="my-food">
	<li>朝ごはん</li>
	<li>昼ごはん</li>
	<li>おやつ</li>
	<li>夕ごはん</li>
	<li>夜食</li>    
</ul>

なんてことも無いHTMLです。

.my-food {
	list-style-type: none;
}

リストのCSSです。 チェックのアイコンを使うので、リストタグのデフォルトの「・」(中黒)を表示させないように「list-style-type: none;」を設定しています。

.my-food li:before {
	padding-right: 10px;
	content: '\f418';
	font: normal 16px/1 'Genericons';
}

アイコンと文字の間を少し空けるために「padding-right: 10px;」としました。

次に「content: '\f418';」
これがチェックを表示させる文字列です。

この文字列は

文字列

「copy css」をクリックすると表示されますのでそのまま使っています。

「font: normal 16px/1 'Genericons';」これの記述も無いと表示されませんので必ずは記述してください。

16px/1は、アイコンのサイズを変えることができます。
30pxにすればアイコンが大きくなります。

まとめ

CSSファイルを設定すれば簡単にアイコンを表示させることができるので重宝しています。

[サンプル] Webフォントを使ってアイコンを表示させる

ぜひ、試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.