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
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?
5
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