web-dev-qa-db-ja.com

Font Awesome 5のアイコンの色を変更する方法は？

これらのコードを使用してFont Awesome 5アイコンに色を付けることはできません。色を設定するためにfill cssプロパティを試してみましたが、機能しませんでした。

HTMLコード：

<div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

CSSコード：

.icons i {
  color: #2759AE;
}
cssfont-awesomefont-awesome-5
11
Ed Joe

Font Awesome 5はアイコンにsvgを使用し、内部のpathはfill:currentColorで設定されているため、単にsvgの色を変更します。

.icons svg {
 color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

コードからわかるように、JSバージョンをロードすると、iはsvgに置き換えられます。

enter image description here

CSSバージョンを使用している場合は、iに色を適用できます。

.icons i {
 color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

したがって、すべてのケースで機能することを確認するには、両方のセレクターを使用するだけです。

.icons i,.icons svg {
   color: #2759AE;
}
12
Temani Afif

Font Awesome 5のsvg-with-jsバージョンを使用している場合は、<i></i>内のすべてを取得し、<svg>に前処理します。パスにfill="currentColor"が含まれていることを指定しています。そのため、currentColorを必要な色に設定する必要があります。 1つのオプションは次のとおりです。

svg {color: blue;}

公式ドキュメント インラインスタイルを推奨：

<i class="far fa-edit fa-5x" style="color:blue"></i>

または、外部要素の1つにcurrentColorを設定します。例えば：

<div class="bggray2 text-center" style="color: blue;">
  <i class="far fa-edit fa-5x"></i>
</div>

それをCSSファイルに移動するには、次のようにします。

div .bggray2 {
    color: blue;
}
1
duncandoo

Bootstrap 4を使用している場合は、タグの親で、text-'color '設定を使用できます。

<div class="bggray2 text-danger">
 <i class="far fa-edit fa-5x"></i>
 </div>
1
Holt180