如何更改Semantic UI图标的颜色？

Question

我可以用以下代码制作一个点赞图标：

<i class="thumbs up icon large"></i>

但是，我该如何将其从黑色变为灰色？我正在开发Chrome扩展程序，我在manifest.js中添加以下CSS样式：

"content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],

        "css": [ "tab/layouts/style.css", "app/lib/semantic.min.css" ],
        "js": [ "common/owconstants.js", "common/OWprotocol.js", "3rdparty/jquery-1.10.2.min.js", "3rdparty/jquery.mCustomScrollbar.concat.min.js", "3rdparty/jquery-ui-1.10.3.custom.min.js", "common/common.js", "tab/sidebars.js", "tab/communication.js", "tab/syncobject.js", "tab/popup.js", "tab/authorization.js", "tab/userinfo.js", "tab/annotation.js", "tab/usercard.js", "tab/userlist.js", "tab/notifications.js", "tab/friendlist.js", "tab/injection.js", "tab/drops.js", "tab/chat.js", "tab/tracking.js", "tab/keywords.js", "tab/tabscript.js", "app/lib/semantic.min.js"]
    }
],

- Niklas Rosencrantz

---

请将您的 CSS 添加到问题中。 - Gareth Whittaker

@GarethWhittaker 我添加了加载CSS的代码。我的所有CSS都是从semantic-ui外部提供的。 - Niklas Rosencrantz

Answer 1

您也可以应用：<i class="red users icon"></i>。关于semantic-ui的更多信息，建议访问此文档http://semantic-ui.com/elements/icon.html#/definition

- yaircarreno

Answer 2

您可以应用以下操作：

color: gray; // or any suitable color code, e.g. #808080

如果适合的话，请将其添加到现有类thumbs up icon large之一中，或者添加自己的新类并将样式应用于此类：

HTML

<i class="thumbs up icon large own-class"></i>

样式表

.own-class {
    color: gray;
}

- Gareth Whittaker

---

有些图标没有轮廓线。我们如何添加轮廓线样式？例如，对于解锁图标、星号图标不支持轮廓线特性。 - milan

Answer 3

 <i class="large **black** inverted alarm icon"></i>

如果你使用语义化编码，请定义颜色名称。

- gurpreet singh

Answer 4

针对白色主题： <i class="bars icon" style="color:#ffffff !important" id="rmenu"></i>e

- Michael Nelles