Cuando necesitamos implementar iconos en una página web, solemos recorrer a plataformas como Font Awesome, ya que es un sistema fácil y rápido. El problema es que este tipo de plataformas nos carga una librería externa y muy completa de todo tipo de iconos que no necesitamos. Esto repercute negativamente en Google Page Speed. Luego para solucionarlo tienes que instalar un plugin como Autoptimize, hacer pruebas, etc.
Si sólo necesitas unos pocos, aquí tienes un recurso interesante que te puede ser útil: crear iconos sólo con CSS.
Se llama cssicon.space. Se trata en una galería de iconos hechos directamente con puro CSS, nada mas.
Cómo utilizar CSS ICON
El funcionamiento es simple:
Paso 1
Seleccionamos el icono deseado y se nos abre un sidebar con el código necesario: una etiqueta en HTML y su CSS.
Paso 2
Copiamos el HTML del icono y lo pegamos dónde nos interesa, por ejemplo:
<div class="search icon"></div>
Paso 3
Copiamos y pegamos el CSS del icono en nuestra hoja de estilos:
.search.icon {
color: #000;
position: absolute;
margin-top: 2px;
margin-left: 3px;
width: 12px;
height: 12px;
border: solid 1px currentColor;
border-radius: 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search.icon:before {
content: '';
position: absolute;
top: 12px;
left: 5px;
height: 6px;
width: 1px;
background-color: currentColor;
}Ya tenemos nuestro icono funcionando.
Como hemos comentado, no es un sistema tan rápido de utilizar como Font Awesome y tampoco tiene ni mucho menos tanta variedad de iconos para escoger. Pero si necesitas algunos básicos (flechas, lupas, candados, etc. ), como por ejemplo, para crear un theme de WordPress, un plugin, una aplicación, o lo que sea, esta es una muy buena elección.
