Adicionar uma imagem de ícone à classe css para elementos html

Preciso de adicionar imagem de ícone a elementos HTML como este, no caso de fonte incrível e bootstrap.

Assim

enter image description here

por exemplo, preciso de associar imagem de ícone à classe css. Digamos que o nome da turma é ico e se eu fizer algo assim 

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

então deve aparecer como na imagem acima.

Como posso realizar este recurso muito importante para o design IU usando CSS?

Author: Harry, 2015-04-11
Source

2 answers

Tenta isto 

.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;
}
 6
Author: Yazan W Yusuf, 2015-04-11 10:05:39

Podes fazer isso 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>
 6
Author: Akshay, 2015-04-11 10:03:45