08 Setembro 2008 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.

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://"]

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

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:

/* 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?

Artigos Relacionados

• 5 players flash gratuitos para o seu website
• Otimize as suas imagens com PunyPng
• O seu website está lento?
• Aumente o poder do Google Analytics
• O poder das Content Delivery Network

TrackBack URI for this entry

Diogo Pinto Setembro 09, 2008	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	Dica muito boa! Como sempre. Abraço.
Gonçalo M Setembro 10, 2008	@ 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
chapa Abril 12, 2011	Os codigos são de CSS correto? Porque a div tipcod está escrito php? Achei um pouco confuso isso....