HTML How to Make a Website Adding Pages to a Website Add Iconography

Rickie Thornley
Rickie Thornley
Full Stack JavaScript Techdegree Student 7,440 Points

Can't get icons to show up

I have followed the lesson to a T as far as I can tell, but my icon images are not showing up. Im not using twitter im using instagram because I hate twitter, but thats not the point. The css/html appears on point and the files are in the correct directory.

<div id="contact-info">
    <section>
        <h3>General Information</h3>
        <p>I am currently avaliable for private sessions and any type of photoshoot your heart desires, contact me for more. Please contact me.</p>
        <p> Please only contact me by phone if you have a lot of money otherwise I probably wont be able to help you.</p>
    </section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="Phone"><a href="tel:555-6854">555-6854></a></li>
            <li class="Email"><a href="mailto:moron@idiotface.com">moron@idiotface.com</a></li>
            <li class="Instagram"><a href="https://www.instagram.com/idiothead">Instagram</a></li>
        </ul>
    <section>
/*********************************
--------------CONTACT PAGE----------
**********************************/

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}


.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.instagram a {
    background-image: url('../img/instagram.png');
}

1 Answer

Rickie Thornley
Rickie Thornley
Full Stack JavaScript Techdegree Student 7,440 Points

Figured it out,

my class definitions were capitalized, and in the CSS, they were not. I un-capitalized the class definitions in the html and the images showed up. Yay for self problem solving.