#365Posts – Ícones Perfeitos para seu Site ou Blog

Há muitos anos atrás, quando a Internet começou a ganhar espaço no Brasil, eu “senti” que ela seria o caminho pelo qual meu futuro profissional solidificar-se-ia. Mas como era mais uma sensação (ou intuição), e este tipo de coisa normalmente não dá indicações objetivas dos passos a trilhar, resolvi começar estudando o (que me parecia ser) o mais elementar de tudo: HTML¹.

Logo no primeiro site que tentei fazer eu vi que para ser webdesigner faltava-me o essencial: talento. Mas a despeito disso fiz muitos sites, por alguns cheguei até a cobrar².

Quando finalmente o @gusfune me informou da existência do Twitter Bootstrap (link para o meu fork favorito) experimentei a alegria de finalmente poder fazer coisas na web com visual equilibrado e minimamente atraente — para os meus padrões de exigência.

Apesar de eu achar o Twitter Bootstrap um pouco mais para Cobol do que para C — haja vista a quantidade de objetos que precisam ser adicionados à página ou de classes que se têm que adicionar a um elemento para fazer coisas relativamente simples — ele é um tremendo economizador de tempo, e hoje eu não poderia sequer pensar em iniciar um aplicativo web (e tenho vários por conta do trabalho da PortoFácil) sem utilizá-lo.

Para muitos webdesigners, contudo, as imperfeições do Bootstrap o desqualificam para uso em qualquer projeto “sério”. Mas nenhum deles pode negar a utilidade que teria uma biblioteca de ícones que não usassem imagens, escaláveis para qualquer resolução sem serrilhar, que além de embelezar os sites em que são usados ainda não pesassem nada no servidor.

Este pacote de ícones existe e se chama FontAwesome. Foi desenhado para ser usado como uma webfont, em conjunto com o Twitter Bootstrap (mas também pode ser usado sem o Bootstrap), e vem sendo atualizado constantemente, com a adição de novos ícones, melhorias nos existentes, e até mesmo a incorporação de funcionalidades (como os stack icons, que permitem que ícones sejam sobrepostos para a criação de efeitos mais sofisticados).

Para utilizar o FontAwesome em seu projeto é extremamente simples e fácil, basta adicionar uma linha de código antes do </head> em seu código.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Se você estiver usando o WordPress e quiser fazer as coisas mais de acordo com as melhores práticas da plataforma, pode usar as funções internas da plataforma para isto:

add_action( 'wp_enqueue_scripts', 'load_fontawesome' );
function load_fontawesome() {
    wp_register_style( 'fonts-awesome','https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' );
    wp_enqueue_style( 'fonts-awesome' );
}

Observe que no código acima (que deve ser inserido no [code]functions.php[/code] do tema) eu referenciei a URL do script incluindo o protocolo ([code]https:[/code]), o que em teoria não é necessário em se tratando de HTML5. Contudo, alguns plugins com função de “encolhimento” de código, como o W3 Total Cache ou o WP-Minify (resenhado por mim aqui) podem não saber muito bem como lidar com este tipo de notação.

Seja qual for o método utilizado para incluir o FontAwesome na página, para utilizá-lo é extremamente simples também: basta utilizar a tag <i></i> com os atributos corretos para obter seus belos ícones em qualquer lugar da página³.

Para ver exemplos de código para aplicação dos ícones em uma página, acesse a página de exemplos da FontAwesome.
___
Notas:

1. Se eu pudesse voltar no tempo e fazer alguma coisa diferente eu estudaria C, C++, TCP/IP e segurança digital em vez de dedicar tanto esforço e energia em tecnologias de front-end.
2. Vai dizer que você também não tem esqueletos no armário?
3. A não ser que você inclua o FontAwesome também no editor visual do WP, não conseguirá previsualizar a aparência final dos ícones durante a fase de edição de posts — o que não deve ser problema na maioria dos casos, pois os ícones são mesmo mais utilizados nas partes fixas do leiaute.