Font Awesomeのオプション色々

ツール関連

ども、僕です

適当なアイコンを表示するのに大変便利なFont Awesomeですが、実は色々なオプションが指定できます

今回はみんな大好き、Font Awesomeのオプションを紹介します

サイズ

アイコンのサイズはクラスを指定することで変更できます

指定方法はfa-(サイズ)

ノーマル(デフォルト)

<i class="fas fa-question-circle"></i>

ラージ

<i class="fas fa-question-circle fa-lg"></i>

指定できるサイズ表

クラスサイズ
fa-xs.75em
fa-sm.875em
指定なし
fa-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

実際のサイズ

左から小さい順に、fa-xs,fa-sm,指定なし,fa-lg,fa-2x,fa-3x,fa-4x,fa-5x,fa-6x,fa-7x,fa-8x,fa-9x,fa-10x

スタイル

クラスを指定することでスタイルを変更できます

Solid

Regular

など

他にはLight、Duotone、Brandsなどありますが、これらは有料です

無料なのは基本的にSolidのみです(なぜかクエスチョンマークはRegularでも表示してる)

カラー

カラーはFont Awesomeで指定できるオプションはないので、スタイル属性もしくはCSSでの着色になります

<span style="color: Red;">
  <i class="fas fa-question-circle"></i>
</span>

<span style="color: Blue;">
  <i class="fas fa-question-circle"></i>
</span>

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら