Isso poderia ser aplicado a qualquer fonte de ícone que você usar, mas eu amo o icomoon, não apenas porque ele oferece muitas fontes de ícones da web gratuitas, mas porque a maneira como eles implementam o código de saída que acho que é quase a melhor maneira de aplicá-lo ao seu projetos para garantir compatibilidade, acessibilidade e semântica.
1 – Vá para http://icomoon.io/app
2- Escolha ícones para sua fonte (você pode até importar qualquer arquivo svg para criar uma biblioteca personalizada)
3- Baixe sua fonte personalizada e copie para o seu projeto
4- Para fazer funcionar você deve usar um código semelhante a este:
// Definindo a rota da fonte
@font-face {
font-family: 'my-font';
src: asset-url('my-font.eot');
src: asset-url('my-font.eot?#iefix') format('embedded-opentype'),
asset-url('my-font.ttf') format('truetype'),
asset-url('my-font.woff') format('woff'),
asset-url('my-font.svg#icon-aragon') format('svg');
font-weight: normal;
font-style: normal;
}// Declara um prefixo de classe “ícone” que aplicará a fonte a qualquer classe icon- *
[class^="icon-"], [class*=" icon-"] {
font-family: 'my-font';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}// Alguns ícones de exemplo gerados
.icon-arrow-right:before {
content: "3e";
}
.icon-female:before {
content: "4e";
}
.icon-male:before {
content: "4d";
}Agora podemos chamar qualquer ícone para qualquer elemento desta forma:
<html>
<body>
<div><span class="icon-arrow-right"></span><p>Some content...</p></div>
</body>
</html>Eu uso um <span> para evitar dar a todos os elementos da div a família de fontes da fonte do ícone e também esta é uma prática recomendada para evitar problemas com leitores de tela.
Portanto, dentro do intervalo simplesmente chamamos nosso ícone que você precisa para mostrar, neste exemplo ‘ícone-seta-direita’.
Espero que ajude.