のんびりさんのWEB備忘録

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

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

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

1. BootstrapDCNのサイトにいく
2. Font Awesome CSSをコピーする
3. コピーしたCSSをヘッダーにペーストする
4. アイコンを選び、記述をコピーする
5. アイコンの記述をペーストする

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


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





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


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


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



htmlファイルの任意の場所にペーストします。これで完了です
BootstrapとFont Awesomeのアイコンを比較してみました
いい感じに完成です。