その珍事の詳細は BootstrapのアイコンがiOS絵文字になる をご覧ください
今回はBootstrapDCNでアイコンをFont Awesomeのアイコンに変えてみましょう
もくじ
- BootstrapDCNのサイトにいく
- Font Awesome CSSをコピーする
- コピーしたCSSをヘッダーにペーストする
- アイコンを選び、記述をコピーする
- アイコンの記述をペーストする
BootstrapDCNのサイトにいく
まずは BootstrapDCN へ行きます。ヘッダー内に記述する部分をゲットします。
Font Awesome CSSをコピーする
サイト内に小窓があります。もし、下のにhtmlの記述が出てなければ黒い四角のところをクリックすると、それぞれに合わせた記述が現れます。
今回はhtml での記述なので、オレンジ色枠内の記述をコピーします。
コピーしたCSSをヘッダーにペーストする
html ファイルに戻り、先ほどコピーした記述をヘッダーのtitleタグの直下にペーストします。
アイコンを選び、記述をコピーする
次に Font Awesome のページに行き、お好みのアイコンを探します。アイコンが決まったらクリックして詳細ページへ…今回はカレンダーのアイコンを使用します
オレンジ色枠内の記述をコピーします。
ちなみにアイコン特有のクラスの後に fa-2x を追記するとサイズが変更できます。数字を大きくするとアイコンも大きくなる仕組みです。
アイコンの記述をペーストする
htmlファイルの任意の場所にペーストします。これで完了です
BootstrapとFont Awesomeのアイコンを比較してみました
いい感じに完成です。
