Font Awesome: のんびりさんのWEB備忘録

2017年06月01日

Bootstrapの勉強中に出くわした珍事に対応

その珍事の詳細は BootstrapのアイコンがiOS絵文字になる をご覧ください

今回はBootstrapDCNでアイコンをFont Awesomeのアイコンに変えてみましょう

BootstrapDCNのサイトにいく

まずは BootstrapDCN へ行きます。ヘッダー内に記述する部分をゲットします。

Font Awesome CSSをコピーする

サイト内に小窓があります。もし、下のにhtmlの記述が出てなければ黒い四角のところをクリックすると、それぞれに合わせた記述が現れます。
今回はhtml での記述なので、オレンジ色枠内の記述をコピーします。

コピーしたCSSをヘッダーにペーストする

html ファイルに戻り、先ほどコピーした記述をヘッダーのtitleタグの直下にペーストします。

アイコンを選び、記述をコピーする

次に Font Awesome のページに行き、お好みのアイコンを探します。アイコンが決まったらクリックして詳細ページへ…今回はカレンダーのアイコンを使用します

オレンジ色枠内の記述をコピーします。

ちなみにアイコン特有のクラスの後に fa-2x を追記するとサイズが変更できます。数字を大きくするとアイコンも大きくなる仕組みです。

アイコンの記述をペーストする

htmlファイルの任意の場所にペーストします。これで完了です

BootstrapとFont Awesomeのアイコンを比較してみました

いい感じに完成です。