How to have each Font Awesome icon be a different color?

On my tumblr blog over here, I use Font Awesome to make all of my page links an icon instead of a text link. All of the icons are filed under the italics class, which I have set to red. However, I would prefer to style them each in a different color. Is there anyway I can do this?

Here's all the relevant code in case you need it.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> [ I believe this is just to tell the code where font awesome comes from. ]

<i class="{text:font awesome}"></i></a> [ embedding the icons. ]

i, em {
color:{color:italic};
font-size:17px;
font-family: 'Satisfy', cursive;
text-shadow: 1px 1px 17px #cc0000;
} [ My italics class ]

Solution

Yes.

You have to write your own css, but each icon will have a unique class. Add the rules for each icon to the style tags inside the top of your template.

.fa-facebook {
   color:#FFCC00;
}

.fa-twitter {
   color:#EC0000;
}

And so on.

EDIT

Or are you talking about different instances of the same class/icon?

If so you would have to use css 3 selectors for that. Like so:

.fa-heart:nth-child(1) {
    color:#FFCC00;
}
.fa-heart:nth-child(2) {
    color:#FF0099;
}
.fa-heart:nth-child(3) {
    color:#EC0000;
}

And so on.

More info on nth-child selectors here

That is assuming they all share the same parent element.

UPDATE

Based on your html structure you would need to write your css like this:

#links div:nth-child(1) a i {
    color:red;
}

#links div:nth-child(2) a i {
    color:#FFCC00;
}

#links div:nth-child(3) a i {
    color:#0099AA;
}

etc. In this case #links is the parent and you have wrapped each anchor in a div element, so you have to target the nth-child of #links which are divs.

Hope that makes sense. There is a fiddle here with your code working: https://jsfiddle.net/lharby/7ov1u1ys/