画像を作るのが面倒!そんなときに使えるアイコンタイプの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ファイルのヘッダーの中にリンクさせてください。

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

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

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

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

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

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

copy html

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

copy html

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

表示ができました。

表示結果

そのほかの表示方法

表示結果

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

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

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

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

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

この文字列は

文字列

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

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

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

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*