如何更改语义UI图标的颜色?

时间:2015-09-06 09:26:55

标签: css colors semantic-ui

我可以用代码

制作竖起大拇指的图标

<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"]
    }
],

4 个答案:

答案 0 :(得分:7)

您还可以申请:<i class="red users icon"></i>。有关语义的更多信息,我建议您访问此文档http://semantic-ui.com/elements/icon.html#/definition

答案 1 :(得分:4)

您可以申请:

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;
}

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

如果使用语义,则定义颜色名称。