Font Awesomeのメモ

Sponsored Link
ロリポップ!レンタルサーバー

 

本当にメモです。

Font Awesome

Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
Font Awesome fontawesome.com
Font Awesome

さまざまなアイコンをWebフォントとして使う事の出来る仕組みで、個人利用・商用利用がOKなので安心。

使い方(ざっくり)

まずスタイルシートを読み込んで、

<link rel="stylesheet" href="/url-to-css/font-awesome.min.css">

表示したいところに以下のように記述。

<span class="fa fa-inbox"></span>

すると、その場所にアイコンが表示されます。

指定した、"fa-inbox"がアイコンの名前になりますが、無料で使えるアイコンだけでもかなりの数が使えます。

チートシートで確認してみてください。

Get a Version 5 Cheatsheet for Unicode & Glyphs | Font AwesomeNeed a Font Awesome icon's glyph, name, or unicode value? Use this Version 5 cheatsheet for quick copying and pasting.
Get a Version 5 Cheatsheet for Unicode & Glyphs | Font Awesome fontawesome.com
Get a Version 5 Cheatsheet for Unicode & Glyphs | Font Awesome

inboxはこんなアイコンです。

inboxのアイコン

 

 

デザインツールで使う時などはローカルにフォントをインストールすることも出来ます。

この辺はまたの機会に。


 

Sponsored Link