Fontes da web de ícones semânticos e acessíveis

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.