可以更改 Font Awesome 的圖示顏色嗎？

問題描述

由於某種原因，我必須將其圖示包裝在<a> 標籤中。有沒有辦法將 font-awesome 圖示的顏色改為黑色？或者它是否不可能只要它包裝在<a> 標籤中？字型真棒應該是字型不是影像，對吧？

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

最佳解決方案

這對我有用：

.icon-cog {
  color: black;
}

對於較新版本的 Font Awesome，它可能如下所示：

.fa-cog {
  color: black;
}

次佳解決方案

HTML：

    <i class="icon-cog blackiconcolor">

css：

    .blackiconcolor {color:black;}

您還可以新增額外的類到按鈕圖示…

第三種解決方案

您可以在 style 屬性中指定顏色：

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

第四種方案

要按這種按鈕中的 cog-icons，您可以給按鈕一個類，並且只有在按鈕內部設定圖示的顏色。

HTML：

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS：

.my-nice-button>i { color: black; }

這將使您的按鈕的直接後代的任何圖示變黑。

參考文獻

• Can I change the color of Font Awesome’s icon color?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。