Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nathan Josef
Nathan Josef
4,805 Points

how to change phone and email icon colors?

Hi all

How would I go about changing a black phone icon from linked below to white??-

http://fortawesome.github.io/Font-Awesome/icon/phone/

Is this best done in photoshop or is it easier to override somehow in css?

Thanks!!

Nathan

6 Answers

Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points

Oh right, I see you are using png's... It's not something I normally use, but my 2-cents on the matter here:

Turn your png into a transparent file displaying the image in white, you can then use filters by -webkit-filter and filter: Filters are new to browsers and is only supported in very modern browsers. You can change an image to grayscale, sepia and lot more (look at the example).

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

If you are unfamiliar with filters, it might be better to use photoshop/gimp.

I do realize that this might leave you with more questions than when you started, but hope it still helps!

Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points
Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points

Hi Nathan,

Given that they're simply fonts, then you should be able to style them as fonts.

Like this for example:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

***Edit

You can also just add style inline:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

Hope this helps!

Nathan Josef
Nathan Josef
4,805 Points
Nathan Josef
Nathan Josef
4,805 Points

Sorry Ferdinand here is my code mate.

            <h3> Contact Details </h3>
      <ul class="contact-info">
      <li class="phone"><a href=tel:"555-6425">0400 000 000</a> </li>
      <li class="mail"><a href="mailto:example@example.com">example@example.com</a></li>

        </ul>

    </div>
Nathan Josef
Nathan Josef
4,805 Points
Nathan Josef
Nathan Josef
4,805 Points 
.contact-info li.phone a {

    background-image: url('../img/phone.png');

}

.contact-info li.mail a {

    background-image: url('../img/mail.png');




}


.contact-info li a {
    color:white;
}


.contact-info {

    padding:0;
    margin:0;
    font-size:1em;
}

.contact-info a {

    display: block;
    min-height:20px;
    background-repeat:no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
    background-color:white;

}
Nathan Josef
Nathan Josef
4,805 Points
Nathan Josef
Nathan Josef
4,805 Points

My fault.. I didn't explain it well. So in summary if using png. Changed color in PS or Gimp.

Else could use something like font awesome? Sorry for the noob questions, I'm working on my first solo project away from course material.

Thanks

Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points

That is correct, I highly recommend you use font-awesome. I use it myself for small projects. Hell I even use it for bigger apps if I feel particularly lazy. It makes your life a lot easier, specially since you are fairly new at this and you will probably change your mind a lot on colours, font-awesome makes this sooo easy.

We all had our first projects, and mine was aweful. It does not matter, it is still very good practise.

Hope this helps!

Nathan Josef
Nathan Josef
4,805 Points
Nathan Josef
Nathan Josef
4,805 Points

Awesome. Thanks!

Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points

You're welcome!