Font Awesomeを手っ取り早く使う。

HTML/CSS

アイコンをSVGで作って描きだして…　という手間をアイコンフォントで補ってくれるのが「Font Awesome」
フレームワークでお世話になっている「BLUMA」でも推奨されてるツールですが、実際使おうとすると、初めての時はちょっと混乱します。
なぜならFontAwesomeのサイトが英語だから。笑

そこで手っ取り早く使う方法をmemoしておきたいと思います。

まずFont Awesomeのcssを読み込みます。

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

続いて、CSSファイルに以下を追加。

/* =====================================
        FontAwesome
===================================== */

.fa {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

後は使いたい箇所にを設置するのだけれど、こちらから使いたいアイコンを選んできます。
ピクセルラボさん　＞ FontAwesome一覧

使いたいアイコンをクリックするとポップアップで表示されるコードをコピーします。

<i class="fa fa-coffee "></i>

これを以下のようにテキストの前なんかに設置してあげればOK

<p><i class="fa fa-caret-circle-right"></i>お問合せ</p>

簡単なので、ぜひ導入してみてください

ピックアップ記事

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。