HTML と CSS を使って Font Awesome の歯車アイコンの色を変更する方法
Font Awesome の歯車アイコンの色を変更するには、HTML と CSS を使用して以下のいずれかの方法で行うことができます。
方法 1: HTML にスタイルを追加する
HTML タグに style 属性を追加することで、アイコンの色を直接変更できます。 以下の例では、歯車アイコン (fa-cog) の色を青色に変更しています。
<i class="fa-cog" style="color: blue;"></i>
方法 2: CSS でクラスを定義する
CSS で新しいクラスを定義し、そのクラスにアイコンの色を設定することができます。 以下の例では、fa-cog-blue というクラスを作成し、歯車アイコンの色を青色に変更しています。
.fa-cog-blue {
color: blue;
}
この CSS クラスをアイコンに適用するには、HTML タグに class 属性を追加します。
<i class="fa-cog fa-cog-blue"></i>
方法 3: CSS を使ってグローバルに色を変更する
すべての Font Awesome アイコンの色をグローバルに変更するには、CSS で .fa セレクタを使用します。 以下の例では、すべてのアイコンの色を青色に変更しています。
.fa {
color: blue;
}
補足
- 上記の例では青色を使用していますが、好きな色に変更することができます。
- アイコンの色だけでなく、サイズや回転角度なども CSS で変更することができます。
以下のコードは、HTML と CSS を使用して Font Awesome の歯車アイコンの色を青色に変更する方法を示しています。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icon Color Change</title>
<link rel="stylesheet" href="https://fontawesome.com/v4/">
</head>
<body>
<i class="fa-cog" style="color: blue;"></i> <i class="fa-cog fa-cog-blue"></i> <i class="fa"></i> </body>
</html>
CSS
.fa-cog-blue {
color: blue;
}
説明
このコードは、以下の内容を実行します。
headセクションで Font Awesome の CSS ファイルをインポートします。bodyセクションで、3 つの Font Awesome アイコンを表示します。- 最初のアイコン (
<i class="fa-cog" style="color: blue;"></i>) は、HTML に直接style属性を追加することで色を変更します。 - 2 番目のアイコン (
<i class="fa-cog fa-cog-blue"></i>) は、CSS でfa-cog-blueというクラスを作成し、そのクラスに色を設定することで色を変更します。 - 3 番目のアイコン (
<i class="fa"></i>) は、CSS で.faセレクタを使用することで、すべての Font Awesome アイコンの色をグローバルに変更します。
- 最初のアイコン (
実行方法
- 上記のコードを
index.htmlなどのファイルに保存します。 - Web ブラウザでそのファイルをを開きます。
3 つの Font Awesome アイコンが表示され、それぞれ異なる方法で色が変更されていることを確認できます。
- このコードは、Font Awesome 6 を使用しています。古いバージョンの Font Awesome を使用している場合は、CSS セレクタとクラス名が異なる場合があります。
- コードを自由に改変して、アイコンの色や他のスタイルを変更することができます。
Font Awesome の歯車アイコンの色を変更するその他の方法
HTML と CSS を使用する方法以外にも、Font Awesome の歯車アイコンの色を変更する方法はいくつかあります。
@mixin fa-cog-blue {
color: blue;
}
.fa-cog {
@include fa-cog-blue;
}
このコードをコンパイルすると、以下の CSS コードが生成されます。
.fa-cog {
color: blue;
}
Font Awesome には、LESS ファイルが用意されています。 このファイルをカスタマイズすることで、アイコンの色をグローバルに変更することができます。 以下の手順で、歯車アイコンの色を青色に変更する方法を示します。
- Font Awesome の LESS ファイル (
variables.less) をダウンロードします。 - 以下のコードを
variables.lessファイルに追加します。
@fa-font-awesome-color: #007bff; /* 青色 */
variables.lessファイルをコンパイルして、CSS ファイルを作成します。
Font Awesome を SVG として使用する
Font Awesome アイコンは SVG 形式でも提供されています。 SVG アイコンを使用すれば、CSS で色を変更する必要はありません。 以下の例では、歯車アイコン (fa-cog) を SVG として使用する方法を示します。
<img src="https://fontawesome.com/v5/icons/cog" alt="歯車アイコン">
インライン SVG を使用する
Font Awesome アイコンをインライン SVG として HTML に埋め込むこともできます。 以下の例では、歯車アイコン (fa-cog) をインライン SVG として使用する方法を示します。
<svg class="fa fa-cog" aria-hidden="true">
<use xlink:href="#fa-cog"></use>
</svg>
この SVG コードを編集することで、アイコンの色を変更することができます。
上記以外にも、Font Awesome の歯車アイコンの色を変更する方法があります。 ご自身のニーズに合った方法を選択してください。
html css colors
