【使用頻度高め】FontAwesomeスタイルのつけかた

こんにちは！horiuchiです
前回の記事「アイコンを表示させる4つの方法」を書いた後
思ったよりFontAwesomeのアイコンを使用する機会が多かったので
よく使うスタイルシートをまとめることに決めました

下記のコードhead内に挿入すれば

準備する

1. 下記のコードをhead内に記載

2. 下記のページから好きなアイコンを選ぶ Font Awesome Icons

使い方

HTMLに記載する

【ソース】

$メールアイコンを表示$

【表示】

メールアイコンを表示

疑似クラスを使って、CSSに記載する

【ソース】

.ico_mail:before {
padding:0 0 0 10px
font-family: FontAwesome;
content: 'f0e0';
}

【表示】

メールアイコンを表示

【おまけ】回転させてみる

classにfa-spinを追加するとアイコンが回転しまう

【ソース】

$回転するメールアイコンを表示$

【表示】

回転するメールアイコンを表示

他にもクラス名をつけるだけで、角度を変えたりサイズを大きくできたりするので、詳しくは私の大好きな下記の「サルワカブログ」にてご確認ください。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう