CODEWITHSUNDEEP
htmlcssfont-awesome
JimmyP
JimmyP

Reputation: 31

How to apply different colours for different <a> tags in a set

I'm a wee bit stuck...

I'm trying to make these 4 icons different colors enter image description here

<div class="row centered">
        <div class="row centered">
            <div class="col-lg-8 col-lg-offset-2 w">
                <a  title="Twitter" href="http://twitter.com/itsjaymem" target="_blank" > <i class="fa fa-twitter fa-4x"></i></i></a> 
                <a  title="JimmyP.co" href="http://jimmyp.co" target="_blank"><i class="fa fa-code fa-4x"></i></a>
                <a  title="Instagram" href="http://instagram.com/itsjaymem" target="_blank"><i class="fa fa-instagram fa-4x"></i></a>
                <a  title="Email Me!" href="mailto:[email protected]"><i class="fa fa-envelope fa-4x"></i></a>
            </div>
        </div>
</div>

Upvotes: 0

Views: 1799

Answers (4)

user3155848
user3155848

Reputation: 1

Well one thing that you can try is adding an "id" to those icon tags.

HTML

<a  title="Twitter" href="http://twitter.com/itsjaymem" target="_blank" > 
<i class="fa fa-twitter fa-4x" id="twitter-icon"></i></i></a>

Then on your CSS you would target that "id" and use background-color.

CSS

#twitter-icon { background-color=blue; }

Upvotes: -1

Prasanth K C
Prasanth K C

Reputation: 7332

Use :nth-child pseudo class like this,

FIDDLE DEMO >>

.w a:nth-child(1)
{
    color:#FF0000;
}
.w a:nth-child(2)
{
    color:#FF00FF;
}
.w a:nth-child(3)
{
    color:#CCCCCC;
}
.w a:nth-child(4)
{
    color:#FFFF00;
}

Refer to :nth-child in detail HERE >>

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

Try this: 

 .fa-twitter{
    background-color:Red;
 }
 .fa-code{
    background-color:Green;
 }
 .fa-instagram{
    background-color:Yellow;
 }
 .fa-envelope{
    background-color:Blue;
 }

Note: there is error in your code:

change this

<i class="fa fa-twitter fa-4x"></i></i>

To

<i class="fa fa-twitter fa-4x"></i>

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157384

You can either use nth-of-type to target each or you can use element[attr=val] to target those elements uniquely and assign color to them..

If you are going with nth-of-type you can write it as 

div.col-lg-8 a:nth-of-type(1) i {
   color: #f00;
}

Or if you are going with element[attr=val] selector, you can write it as

div.col-lg-8 a[class*="fa-twitter"] i {
   color: #f00;
}

You can also assign the colors straight away to the respective classes, only if you are going to use it on a single element, than you can write it as...

.fa.fa-twitter {
   color: #f00;
}

Upvotes: 1

Related Questions