How to change Icon colour for iconmoon icons

Question

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

Solution 1

The icons should be treated as text.

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

Example:

.icon-pawn { color: red; }

Solution 2

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.

Comments

[arnold]

can you provide some of your CSS code?

[rocking]

@arnold I have added the css file,Please have a look

[drip]

Then change the color attribute to the icons...treat them as text. (a.k.a if you write color: red; they will turn red)

[rocking]

@drip where will I write colour attribute?

[drip]

In the css where else...

[rocking]

@drip I mean under this line @font-face { or under this line [class^="icon-"], [class*=" icon-"] {

[rocking]

@drip I did background-color:red But its comes black and red now imgur.com/AqUsHk9

[drip]

Each icon has a class, for example .icon-pawn { color: red; } if you want to change that particular icon to red, or if you wnat all your icons to be red then you use [class^="icon-"], [class*=" icon-"] {color: red;}, like I said you can treat them as text, how do you target a paragraph inside a div, you can target the icons the same way, it's even easier since they have clasess...And you can write it everywhere, in the end and in the beiging of the css it doesn't matter...and I said COLOR NOT 'background-color'...

[rocking]

@drip I tried with color first but nothing got changed and after that I tried with background-color

[drip]

See this: s4.postimg.org/bsnw8mtst/zzz.jpg Don't know what you are doing wrong, but it works at the live site...

[rocking]

@drip Thanks for the comments.You can post this as answer.I will accept

[rocking]

As promised,I have accepted your answer and upvoted also.Please help me If I have any problems in future

[Adrien Pavillet]

I'm also facing this wierd issue, did you find a solution or a why?