Crear iconos directamente con CSS para mejorar la velocidad de carga

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.

Relacionado:
Conseguir un 100 en Google Page Speed Insights
Como Optimizar las Imágenes para Mejorar el SEO de tu WordPress