CODEWITHSUNDEEP
csshtmlicons
rocking
rocking

Reputation: 4889

How to change Icon colour for iconmoon icons

I have downloaded some icons from icomoom but the icon background colours are black and white.I want to give my own colour.Can any body please tell me how to do?

When I downloaded the icon ,I got the following style.css

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-haa506');
    src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
        url('fonts/icomoon.woff?-haa506') format('woff'),
        url('fonts/icomoon.ttf?-haa506') format('truetype'),
        url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: "\e600";
}
.icon-images:before {
    content: "\e601";
}
.icon-pawn:before {
    content: "\e602";
}

Upvotes: 2

Views: 13377

Answers (3)

Galley
Galley

Reputation: 633

This works for me:

.icon-color-success:before {
    color: #28a745 !important;
}

and then:

<i class="icon-python icon-color-success"></i>

Upvotes: 0

Henry
Henry

Reputation: 7881

I had to use the ::after pseudo element.

.icon-pawn::after { color: red; }

I'm not sure if this is peculiar to my project though, as I'm working on small changes to someone else's code.

Upvotes: 2

drip
drip

Reputation: 12943

The icons should be treated as text.

If you apply a color to them. they will change their color.

Example:

.icon-pawn { color: red; }

Upvotes: 6

Related Questions