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

HTML/CSS

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

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

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

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

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

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

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

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

ピックアップ記事

関連記事一覧

  • コメント ( 0 )

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

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