楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips

このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ

[natural90000]

“アイコン表示幅を統一させるアイコンによってそれぞれの幅が違うため、リストやリンクボタンなどで利用すると、テキスト部分の表示開始位置がかわってしまいます。 そのため、アイコンを表示している部分に統一の

[sophy365]

Awesomeフォント使い方。後で確認する

[mtwd-office-25]

無料で使えるアイコンが最近減っていて悲しい

[mohri]

“サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたもの”

[yutorinosatoko]

Font Awesomeめっちゃ(　・∀・)ｲｲ!!

[niri401]

“ fa-fw”

[yujiorama]

たーのしー

[tadasy]

“fa-fw”

[pro_searcher]

“ fa-lg”

[fukupika]

css アニメーション アイコン 角度

[uva]

いろいろできるんですね

[takaken1123]

[2016-04-26 19:32]

[masapon49]

やっとCSSに組み込む方法見つけた

[Enri]

“直接テキストに入れたいような場合、HTMLでは該当するコード、例えば fa-flag のアイコンを使いたい場合は、 &#x + f024 + ; を指定することで利用ができます。”

[okumurasv]

webフォント　Awesome　フォト

[simazoe]

かたじけない！

[gotack]

“Glyphicons”

[quanon]

素晴らしいまとめ！

[moerrari]

ダウンロードせずに使うにはBootstrap CDNを利用する。

[sisicom]

アイコンフォントの使い方

[hatebu_zuka]

“<p><i class="fa fa-quote-left fa-2x fa-border"></i></p>”

[laptice]

Webでよく使われる記号をWebフォントにしたもの

[haishi]

このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome、使い方の基本を知っていることで利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つかかいておきます。 Font Awesome, th