アイコンを表示する
基本の表示方法はhtmlタグを挿入するだけ。
<i class="fas fa-arrow-alt-circle-right"></i>
アイコンの色を変更する
スタイル属性を付与する
<i class="fas fa-arrow-alt-circle-right" style="color:#ff0000;"></i>
アイコンをくるくる回す
アイコンを回転させる fa-spin
アイコンを8ステップで回転させる fa-pulse
<i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i>
回転に適したアイコンは、「Spinners」カテゴリーのアイコンです。
Spinnersアイコンの一覧はこちら。
Font Awesome Spinners アイコン 一覧
アイコンをfloat表示する
float属性を付与してテキストを回り込み表示させることができます。
float:leftfa-pull-left
float:rightfa-pull-right
<i class="fas fa-quote-left fa-2x fa-pull-left"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <i class="fas fa-quote-right fa-2x fa-pull-right"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.