Neste tutorial irei mostrar uma forma de combinar ícones com classes CSS reutilizáveis para uso em interfaces variadas. Pessoalmente, utilizo estas técnicas nas minhas interfaces administrativas, entre outras situações.

Para este tutorial estarei utilizando o famoso iconset Silk do site famfamfam.com.

Download dos Arquivos de Exemplo

Combinando Classes CSS

Você sabia que podemos combinar classes CSS umas com as outras? Apesar de ser algo óbvio para muita gente, vários web designers ainda não utilizam as vantagens desta técnica.

Além da combinação de classes, iremos usar também o seletor de atributo [], que permite selecionar qualquer atributo de uma tag HTML.

Vamos começar com um link de exemplo abaixo:

<a class="icone" href="arquivo.pdf">Download do PDF</a>

Podemos colocar um ícone de arquivo PDF do nosso banco de ícones com o seguinte código CSS:

.icone {
    padding-left: 22px;
    background: url(acrobat.png) no-repeat left center;
    text-decoration: none;
}

Veja o resultado aqui

Utilizando a propriedade background e um pouco de padding, conseguimos o efeito desejado. Porém, existem formas de transformar isso em um sistema reutilizável e mais flexível.

Vamos utilizar a seguinte lista de links como exemplo:

<ul>
    <li>
        <a class="icone pdf" href="arquivo.pdf">Download do PDF</a>
    </li>
    <li>
        <a class="icone doc" href="arquivo.doc">Download do arquivo Word</a>
    </li>
    <li>
        <a class="icone xls" href="arquivo.xls">Download do arquivo Excel</a>
    </li>
</ul>

Combinando a classe "icone" com outras, como pdf ou doc, criamos um pequeno e simples sistema de classes reutilizáveis. Veja o código CSS:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
}

.icone.pdf {
    background-image: url(acrobat.png);
}

.icone.doc {
    background-image: url(page_white_word.png);
}

.icone.xls {
    background-image: url(page_white_excel.png);
}

Veja o resultado aqui

E se quisermos utilizar os links fora de uma lista? Podemos usar inline-block na propriedade display, que faz com que os links se comportem como bloco, porém sem perder a formatação em linha, assim respeitando corretamente margens e paddings sem a necessidade de se utilizar flutuação. Código abaixo:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
    display: inline-block;
    margin-right: 1em;
}

Veja o resultado aqui.

Utilizando as vantagens da combinação de classes, podemos também criar uma classe "esconde-texto", para que possamos trabalhar apenas com os ícones, apenas adicionando uma classe e sem mudar mais nada no markup. Código HTML:

<a href="arquivo.pdf">Download do PDF</a>
<a href="arquivo.doc">Download do arquivo Word</a>
<a href="arquivo.xls">Download do arquivo Excel</a>

E código CSS:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
    display: inline-block;
    margin-right: 1em;
    min-height: 16px; /* altura dos ícones */
}

.esconde-texto {
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: -9000px;
    padding: 0;
}

Veja o resultado aqui

Selecionando atributos

Por fim, uma alternativa é é utilizar o seletor de atributo [] para deixarmos o código ainda mais limpo. Os seletores de atributo da CSS2 possuem suporte amplo nos navegadores (exceto IE6, é claro) mas, aqui, irei usar um específico de CSS3. Portanto, é necessário verificar o suporte para os principais navegadores e se essa técnica poderia ser utilizada no seu caso. Com o seletor [$=] conseguimos verificar se o valor de um atributo termina com determinada sequência de caracteres. Ou seja, conseguimos detectar a extensão do arquivo que está sendo indicado em um link, por exemplo.

Código HTML:

<a href="arquivo.pdf">Download do PDF</a>
<a href="arquivo.doc">Download do arquivo Word</a>
<a href="arquivo.xls">Download do arquivo Excel</a>

E código CSS:

.icone[href$='.pdf'] {
    background-image: url(acrobat.png);
}

.icone[href$='.doc'] {
    background-image: url(page_white_word.png);
}

.icone[href$='.xls'] {
    background-image: url(page_white_excel.png);
}

Veja o exemplo final da técnica aqui.

Concluindo, a combinação de classes CSS traz muita flexibilidade para o desenvolvimento de interfaces. Como há muita reutilização de elementos, entre links, botões, menus e outros, este tipo de técnica economiza tempo e deixa o site mais fácil de manter. Inclusive, é algo portátil e que pode ser transportado facilmente para outros sites.