webフォントで色んなアイコンを使おう！[Font Awesome]

2015/06/09

2016/03/17

Works

アイコン画像の代替にフォントを使いたい！そんな要望に答えるのがこの「Font Awesome」

設置方法は至ってシンプル

htmlに以下のソースを記述するのみ！ファイルのダウンロードは必要ありません。

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

表示方法も超シンプル！

以下のソースのように記述します。

<i class="fa fa-home"></i>
//例
このサイトの<i class="fa fa-home"></i><a href="/">ホーム</a>へ戻る

するとこの用に表示されます。

[このサイトのホームへ戻る]

これはフォントなのでcssで色々と変更可能です。

・色を変える：

・大きさを変える：

フォントの種類はこちらのページで確認できます。
使用したいアイコンもキーワードで検索（英語）できます。

適当に並べてみました。
まだまだいっぱいあります！

これを使えばhtml,cssのみで行うデザインにも幅が出るかなと思います。

是非一度お試しあれ！

おもしろかった・役に立った

▼ブログランキング参加中！クリック！▼

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

名前 ※

メール ※

サイト

コメント ※

ソースコードを記入する場合は [code]～[/code] でくくってください。

[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。