Problem with icons not showing up on contact page.

After all day, I have your solution! But, this is not gonna like to you haha, you just closed the unordered-list but left the list tags outside UPPS! It wasn't a CSS error it was a little error in your contact.html :p

• Your code

<section id="secondary">
     <h3>Contact Details</h3>
     <ul class="contact-info"></ul>
     <li class="phone"><a href="tel:555-6425">555-6425</a></li>
     <li class="mail"><a href="mailto:micah@example.com">micah@example.com</a></li>
     <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=parrotfish89">@parrotfish89</a></li>
</section>

• Correction

<section id="secondary">
    <h3>Contact Details</h3>
    <ul class="contact-info">
       <li class="phone"><a href="tel:555-6425">555-6425</a></li>
       <li class="mail"><a href="mailto:micah@example.com">micah@example.com</a></li>
       <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=parrotfish89">@parrotfish89</a></li>
    </ul>
</section>

Can I see your code?

Just under "all my files" in finder on my Mac. They show up on my sidebar in workspaces.

Yes, though in my layout in the workspace sidebar the css folder is 1.3 and img files folder 1.4 (not sure that it matters)..

My arrangement:

1) Main project folder 1.1) about.html 1.2) contact.html 1.3) css (1.3.1) main.css (1.3.2) normalize.css (1.3.3) responsive.css 1.4) img files (1.4.3) mail.png (1.4.11) phone.png (1.4.13) twitter.png 1.5) index.html

I tried both of these, and while gray bullets do show up next to the phone number, email and twitter addresses, the actual icons do not. I'm stumped!

I'm really sorry for make you dance and didn't give you a correct answer before. I created a workspace and solved this, try my code, I'll wait your answer.

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
}

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

edit: Image showing that the code works: http://imgur.com/a/IpEaz

No! No problem, and thank you for all of your help!

Unfortunately it is still not working for me (your above code was my original code as well). I am wondering if it has anything to do with anything i did before? But I have reviewed all my code and usually there is a greyed out portion if a bit of code is nonsensical, i think.

Code here:

http://imgur.com/VSQ1ZDk

Then on my page:

http://imgur.com/OFsz4Fb

https://www.dropbox.com/sh/3tekgswnao7qo19/AABd75e_b9l16xZvGqhRa8g6a?dl=0

Thank you!!

Ah, yes! That was it, simple but costly mistake and the icons finally show up! Now my icons for some reason are on the opposite side of the page as my actual phone #, mail address and twitter handle, but I can probably follow up on this and find a fix. Thanks again!