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