Раздражающая маленькая точка появляется с неупорядоченным списком с дисплеем: inline

Question

Я уложился в следующую проблему. У меня есть неупорядоченный список с социальными значками и вид маленькой точки появляется в правом углу значков, когда я меняю display на inline.

HTML

<div class="iconos"> 
    <ul class="contacto"> 
    <li> 
     <a href="mailto:xxxxxx.com" class="socialicon"> 
     <img src="images/mail.png" width="50" height="50"> 
     </a> 
    </li> 
    <li> 
     <a href="https://www.facebook.com/pages/xxxxx" class="socialicon"> 
     <img src="images/facebook.png" width="50" height="50"> 
     </a> 
    </li> 
    <li> 
     <a href="https://www.facebook.com/pages/xxxx" class="socialicon"> 
     <img src="images/twitter.png" width="50" height="50"> 
     </a> 
    </li> 
    </ul> 

CSS

ul.contacto { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.contacto li { 
    padding: 20px; 
    display: inline; 
} 

Answer 1

Это точка является подчеркивание от <a> элемента. Вы можете скрыть следующим образом:

.contacto li a { 
    text-decoration: none;  
}