• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

Montando Sites

Recursos y Tutoriales de Desarrollo Web con WordPress y Genesis Framework

  • Empieza aquí
  • Tutoriales

Crear iconos directamente con CSS para mejorar la velocidad de carga

13 diciembre, 2018 por Gerber Cucurell

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

Archivado en:CSS, Iconos, Optimización Web, SEO

Acerca de Gerber Cucurell

Desarrollador Web especializado en WordPress + Genesis Framework, Director de Arte y Técnico Superior en Multimedia Interactiva. Más info…

Barra lateral primaria

Categorías

  • CSS
    • Iconos
    • Menus
    • Retículas y Columnas
  • Genesis Framework
    • Custom Posts
    • Footer
    • Header
    • Imágenes Destacadas
    • Page Template
    • Widgets
  • Javascript
  • SEO
    • 404
    • Imágenes
    • Optimización Web
  • WordPress
    • Admin
    • Campos personalizados
    • Clases CSS
    • Google Fonts
    • Gutenberg
    • PHP
    • Plugins
    • Search
    • Shortcodes
    • Temas de WordPress
    • Traducciones
    • WPML
  • Recursos rápidos
  • Info
  • Aviso Legal
  • Contacto