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

Bashir Shafii
Bashir Shafii
Front End Web Development Techdegree Student 5,022 Points

phone and mail icons repeating

here is my html code: <ul class="contact-info"> <li class="phone"><a href="tel: 612-366-8267">612-366-8267<a/></li> <li class="mail"><a href="mailto:bashir.shafii@blackswantech.com">bahsir.shafii@blackswantech.com<a/></li>

Here is my css:

.contact-info { list-style: none; padding:0; margin: 0; font-size: 0.9em; } .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; }

.contact-info li.phone a { background-image: url('../images/phone.png'); }

.contact-info li.mail a { background-image: url('../images/mail.png'); } I get repeating phone and mail icons. Some are static and some are links.

1 Answer

Anthony McCormick
Anthony McCormick
6,774 Points

Your problem is occurring because of your HTML. You currently have <a/> which is not the correct way to close a tag. Since the images are assigned to the <a/> in your CSS, it appears to be repeating this as it hasn't been closed.

<ul class="contact-info">
    <li class="phone"><a href="tel: 612-366-8267">612-366-8267</a></li>
    <li class="mail"><a href="mailto:bashir.shafii@blackswantech.com">bahsir.shafii@blackswantech.com</a></li>
</ul>

This is correct.