hello-world
webエンジニアのメモ。とりあえずやってみる。

オシャレWebアイコン Font Awesome

公開日時

Bootstrapを使うと、デザイナーさんでなくてもそれなりにオシャレサイトが作れるので便利ですね。

Bootstrapの アイコン にはいくつか種類がありますが、 「 Font Awesome」 にはさらにたくさんのアイコンが公開されています。

一番簡単な使い方としてはCDNからcssを読み込むだけで利用可能です。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

あとはアイコン一覧からアイコン名を探してiタグのclassに指定すればアイコンが表示されます。

<i class="fa fa-camera-retro"> fa-camera-retro</i>

これを使えば手軽にオシャレアイコンが導入できます。

おしゃれなWebアイコンフォントがたくさんあるので見てるだけでも楽しいです。

参考


Related #css

[vim]sass(scss)を自動コンパイルできるようにしてcss編集を効率化する

昨日の記事でhtmlマークアップを効率化したので、今回はcss周りを効率化してみます。

[css][sass]mapを使って共通要素の設定を一括管理

最近cssを勉強中で sassを使っているのですが、ページ内に何度も登場する似た要素(top, leftがそれぞれ異なる)のcssをうまく管理できないかなと思い調べていたところ、sass3.3から追加されたmap形式(ハッシュ)を使うとキレイに書けそうだったので試してみました。