10分で完了!ウェブフォントアイコン Font Awesomeの使い方

ウェブフォントアイコンを使えば、いちいち画像ファイルを用意しなくても、おしゃれなアイコンを表示させることができます。
ウェブフォントアイコンを使うには、アイコンファイルを公開フォルダに設置して利用しますが、ウェブのヘッダー部分にリンクを貼るだけで使えてしまうものもあります。
今回はリンクを貼るだけで簡単に使えてしまう Font Awesome を紹介します。
Font Awesomeを使う準備
1 |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
アイコンの選択方法
Font Awesome(http://fortawesome.github.io/Font-Awesome/) のページから使いたいアイコンを探します。
アイコンが一覧になっているので、使いたいアイコンをクリックします。
アイコンページが表示され、下の方にHTMLが表示されています。
1 |
<i class="fa fa-camera-retro"></i> |
これをファイルに貼り付ければアイコンが表示されます。
色・大きさなどの変更
上記の iタグ を spanタグ などで囲みます。囲んだタグのクラス名を sample とします。
あとは CSS で sample に効果を与えればフォントの色・大きさなどが変わります。
1 |
<span class="sample"><i class="fa fa-camera-retro"></i></span> |
1 2 3 4 |
.sample{ font-size:2em; color:#ff0000; } |
リンクを貼るだけで使えて、フォントと同じようにスタイルシートで装飾するだけです。
一度使うと手放せなくなります。
関連記事
- [Bootstrap] Modal dialog(モーダル・ダイアログ)の使い方
- [Vue.js] Vue-CLIの使い方
- [WordPress] twentyfifteen「style.css」のresetをみてみる。
- [PHP] PHP Simple HTML DOM Parserでスクレイピング
- [WordPress] 半角のバックスラッシュを表示する方法