Contact icons: Cannot fix background repeat

I noticed while copying your code in an attempt to test it out that in your first CSS rule for .contact-info where you set the font-size, you set it to 0,9em

You used a comma where you need to use a decimal point so it should be 0.9em

You also appear to have a space in your .contact-info a rule, where the background-size has "20 px" in it, where of course there shouldn't be a space.

NOTICE! REAL SOLUTION HERE!

So I messed around with the code and figured out the problem!

You should be applying the background images to the "a" elements. Right now your code for adding the background images looks like this:

.contact-info li.phone {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

.contact-info li.mail {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

But you want the background image to be applied to the a element inside of those list elements, so you just need to add a reference to the a element, like this:

.contact-info li.phone a {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

.contact-info li.mail a {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

Then the images will appear perfectly on your site :D

Can you paste your code please (html and CSS)? It will help to find your issue.

Here is the HTML. It seems as though my footer icon is also ignoring my css now. Not sure why. It is not resizing to 20px, staying default.

<!--Contact info-->

<!--first column--> <section> <h3>General information</h3> <p>If you have any inquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p> <p>If you have any enquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p> </section> <!--second column--> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:083-000000">083-000000</a></li> <li class="mail"><a href="mailto:kathleen@mail.co.za">kathleen@mail.co.za</a></li>

</ul>
</section>

<footer> <a href="http://facebook.com/myhorsemag/"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <a href="contact.html"><img src="img/mail.png" alt="contact icon" class="social-icon"></a> <p>© 2016 Horse Mag Design.</p> </footer>

CSS

/************************** PAGE: CONTACT **************************/

.contact-info { list-style:none; padding:0; margin:0; font-size:0,9em; }

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

.contact-info li.phone { background-image:url("../img/iPhone-48.png"); }

.contact-info li.mail { background-image:url("../img/mail.png"); }