おまかせホーマン講座用マニュアル > フォントアイコンを活用しよう! > フォントアイコンの基本的な使い方-サイズ、色の変更-

フォントアイコンの基本的な使い方-サイズ、色の変更-

Font Awesomeバージョン4.7のものです。2017年末に新しくバージョン5が公開しています。
バージョン4.7と5は内容が異なるため、バージョン5は追々解説します。

フォントアイコンの基本的な使い方をコードと合わせて紹介します。

フォントアイコンを単発で文章の冒頭に付ける

 メールはこちら
<i class="fa fa-envelope-o" aria-hidden="true"></i>
 車でのアクセスはこちら
<i class="fa fa-car" aria-hidden="true"></i>

フォントアイコンと文章始めの文字の間は、空白を全角1文字分空けています。

フォントアイコンを大きくする

クラス名に「fa-lg」などを追加で大きさが変化します。

<i class="fa fa-car fa-lg" aria-hidden="true"></i>

<i class="fa fa-car fa-2x" aria-hidden="true"></i>

<i class="fa fa-car fa-5x" aria-hidden="true"></i>

フォントアイコンに色を付ける

「style=”color: red;”」という感じでCSSを追加します。単発ではコードに直接追加すればOK。複数の場所に使用する場合は、CSSファイルに追加する。
  
<i class="fa fa-car fa-5x" aria-hidden="true" style="color:red"></i>

フォントアイコンを回転させる

「fa-spin」をクラス名に追加すると、フォントアイコンが回転します。

<i class="fa fa-car fa-5x fa-spin" style="color: red;" aria-hidden="true"></i>

フォントアイコンの角度を変える

「fa-rotate-90」をクラス名に追加すると、フォントアイコンの角度を変化させることができます。
数字のところが角度の値です。

<i class="fa fa-car fa-5x fa-rotate-90" style="color: red;" aria-hidden="true"></i>

関連ページ