42
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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; /*青色にする*/
}
42
41
0

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
42
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?