Aggiunta immagine icona alla classe css per elementi html

Question

Ho bisogno di aggiungere l'immagine dell'icona a elementi HTML come questo in caso di carattere impressionante e bootstrap.

Ti piace questa

per esempio ho bisogno di associare un'immagine icona con classe CSS. Diciamo che il nome della classe è ico e se faccio qualcosa del genere

<a href="#" class="ico">Email Link</a> 

Quindi dovrebbe apparire come nell'immagine sopra.

Come posso realizzare questa caratteristica molto importante per la progettazione dell'interfaccia utente tramite CSS?

Answer 1

Prova questa

.ico:after{ 
    content: ''; 
    display: block; 
    height: 40px; /*height of icon */ 
    width: 40px; /*width of icon */ 
    position: absolute; 
     /*where to replace the icon */ 
    top: 0px; 
    left: -40px; 
     /*background */ 
    background: #F8E6AE url(ico.gif) no-repeat 0px 0px; 
} 

Answer 2

È possibile farlo usando pseudo elements

.ico{ 
 
    width:100px; 
 
    display:block; 
 
    height:20px; 
 
    background:black; 
 
    color:white; 
 
    text-decoration:none; 
 
    padding-left:20px; 
 
} 
 
.ico:before{ 
 
    content: ''; 
 
    background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSj3XfIpf-OOJRCcWz4iN2CU3qMKVVbj0p0bRvKNGVo1U9pk_8ZIlyR8pWreA'); 
 
    background-size:cover; 
 
     position:absolute; 
 
    width:20px; 
 
    height:20px; 
 
    margin-left:-20px; 
 
}

<a href="#" class="ico">Email Link</a> 
 
<a href="#" class="ico">Another Link</a>