LoginSignup
39

More than 3 years have passed since last update.

Font Awesomeの色とサイズを変える方法

Posted at

プログラミングの勉強日記

2020年6月3日 Progate Lv.83
ウェブページ制作中

Font Awesomeのサイズの変更

HTMLファイルにコードを書き足してサイズを変更する
コード 大きさ
fa-xs 0.75倍
fa-lg 1.33倍
fa-2x 2倍
fa-3x 3倍
fa-4x 5倍
fa-5x 7倍
使用例
<i class="fab fa-twitter fa-xs"></i>
CSSを用いてサイズを変更する

 新しくクラスを作り、そのクラスをCSSで大きさ変更する。

使用例
<i class="fab fa-twitter size"></i>
使用例
.size{
  font-size:1.5em; /*1.5倍にする*/
}

Font Awesomeの色を変更

CSSを用いて色を変更する

 サイズの変更と同様に、新しいクラスを作ってそのクラスをCSSで色を変更する。

使用例
<i class="fab fa-twitter size"></i>
使用例
.size{
  color:#1da1f2; /*青色にする*/
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39