How do I change the color of Semantic UI icons?

M

4

6

I can make thumbs up icon with the code

But how can I change the color from black to gray? I do it for a chrome extension and I add the CSS this way in the manifest.js:

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

Militiaman answered 6/9, 2015 at 9:26 Comment(2)

Add your css to the question please. – Volk 6/9, 2015 at 9:33

@GarethWhittaker I added the code that loads the CSS. All my CSS is externally provided from semantic-ui. – Militiaman 6/9, 2015 at 9:35

V

6

You can apply:

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

to one of the existing classes thumbs up icon large if suitable, or add a new class of your own and apply styling to this instead:

HTML

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

Stylesheet

.own-class {
    color: gray;
}

Volk answered 6/9, 2015 at 9:38 Comment(1)

Some icons do not have outline. How can we give outline style? For example for unlock icon, asterisk icon do not support outline feature. – Poolroom 13/4, 2017 at 17:0

F

8

You can also apply:  .For more information about semantic-ui I recommend to visit this doc http://semantic-ui.com/elements/icon.html#/definition

Filipino answered 26/10, 2016 at 2:27 Comment(0)

V

6

You can apply:

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

to one of the existing classes thumbs up icon large if suitable, or add a new class of your own and apply styling to this instead:

HTML

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

Stylesheet

.own-class {
    color: gray;
}

Volk answered 6/9, 2015 at 9:38 Comment(1)

Some icons do not have outline. How can we give outline style? For example for unlock icon, asterisk icon do not support outline feature. – Poolroom 13/4, 2017 at 17:0

L

0

For White: e

Leveroni answered 15/5, 2019 at 9:40 Comment(0)

S

0

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

define color name if you are using semantic.

Sanches answered 11/6, 2019 at 4:25 Comment(0)

Recommended topics

Hot tags