Adicione ícones através de CSS aos seus links

Escrito por Gonçalo Martins

Muitas pessoas utilizam javascript para adicionar ícones aos seus ícones externos, ou a links que apontam para e-mail, ficheiros .zip, .rar, .pdf, Word, Excel... no entanto isto pode ser facilmente implementado utilizando CSS.

links externos

O truque esta em utilizar um atributo que seleccione as "a" tags [< a href="/..." title:"..." (...) >]. Por exemplo, se você quiser que todos os links que apontam para fora do site, apresentem um icon utilize no seu CSS a[href^="http://"]

css
a[href^="http://"] {
background:transparent url(../imagens/linkexterno.png) center right no-repeat;
 
display:inline-block;
 
padding-right:15px;
 
}

O operador '^' significa, "começe com". Ou seja, tudo o que começar com http:// dentro de uma tag "a" leva com um icon.

Operador $

O operador $ significa "acaba com". Pode utilizar este operador para apresentar um icon para uma extensão especifica

php
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background:transparent url(../imagens/ficheirozip.png) center left no-repeat;
 
display:inline-block;
 
padding-left:20px;
 
line-height:18px;
 
}

Outros Exemplos:

php
/* PDF  */
a[href$='.pdf'] {
background:transparent url(../imagens/pdf.png) center left no-repeat;
 
display:inline-block;
 
padding-left:20px;
 
line-height:15px;
 
}
 
 
/* Word */
a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] {
background:transparent url(../imagens/word.png) center left no-repeat;
 
display:inline-block;
 
padding-left:20px;
 
line-height:15px;
 
}
 
/* mailto */
a[href^="mailto:"] {
background:transparent url(../imagens/mailto.png) center left no-repeat;
 
display:inline-block;
 
padding-left:20px;
 
line-height:15px;
 
}

Onde encontrar icones?

Iconfinder.net

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

icones, links, css

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Diogo Pinto Setembro 09, 2008 http:// Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar	Parabéns pelo site, dos melhores sites que já vi desde Agosto! Sou leitor assíduo! Pena o design tar à esquerda... uma sugestão quanto a pub: porque precos.com.pt? Porque não adsense ou assim? ;) Um abraço


leonardo Setembro 10, 2008 http://www.umtudo.com	Dica muito boa! Como sempre. Abraço.


Gonçalo M Setembro 10, 2008 http://weblouca.com	@ Diogo Pinto A publicidade realmente tenho de pensar em mudar, no entanto logo verei pelo que vou optar de futuro. O design quando tiver um tempinho irei centra-lo com certeza... @leonardo obrigado, são comentários assim que incentivam a continuação do trabalho desenvolvido até agora.


Meujovem Dezembro 04, 2009	Olá Gonçalo Eu estou com dificuldade nesses ícones aqui no meu trabalho. Todos os ícones aqui funcionam. Mas no IE quando da quebra de linha o ícone não aparece... Alguma solução para isso no IE? Antecipadamente agradeço