Saltar al contenido

Esta galería de iconos de CSS puro es lo que quieren todos los desarrolladores de frontend

css icons

El diseñador de Adobe Wenting Zhang creó un interesante aplicación web para generando iconos CSS puros. Se llama simplemente «Icono CSS» y puede que sea uno de los mejores generadores de iconos para desarrolladores frontend.

Este proyecto es completamente libre y de código abierto en GitHub por lo que puede descargar y jugar con cualquiera de los códigos.

40 excelentes mini conjuntos de iconos

40 excelentes mini conjuntos de iconos

Cuando emprende la búsqueda de iconos para sus diseños, puede terminar con diferentes … Lee mas

Estos iconos no tiene dependencias CSS o necesita alguna función especial del navegador. A primera vista, puede parecer que los iconos se basan en SVG, pero en realidad son solo divs.

A través de la magia de CSS, puede crear iconos de línea personalizados para elementos de interfaz comunes como el menú de hamburguesas, el icono de tres puntos o el icono de impresión (entre muchos otros).

Puedes elegir entre iconos de línea fina o iconos oscuros llenos. Ambos utilizan propiedades CSS similares e incluso puede ver cuáles son haciendo clic en cualquier icono de la lista. Verás un barra lateral deslizante con el código HTML y CSS junto con el icono ampliado.

galería de iconos de css puro

Si mira hacia la esquina superior derecha de los campos de código, verá un pequeño icono de copia. Haga clic en eso para copiar automáticamente el código a su portapapeles. Ah, ¿y ese icono de copia? También construido con el código CSS puro de Wenting.

A cambiar el color de cualquier icono, solo encontrar la propiedad de color en la clase de icono principal. Actualizar esa propiedad de un color también cambiará todo lo demás.

Cree su propio conjunto de iconos de fuentes fácilmente con Fontello

Cree su propio conjunto de iconos de fuentes fácilmente con Fontello

Podemos ver que los íconos de fuentes se usan ampliamente en los sitios web y por una buena razón. El icono de fuente … Lee mas

Dado que estos iconos son bastante simple, probablemente no funcionarán para todos los sitios web. Pero esta es una alternativa genial a imágenes o fuentes de iconos y es completamente libre.

Revisar la Página de inicio del icono CSS a ver más ejemplos y para copiar / editar la fuente. Tú también puedes prueba cada icono por separado en CodePen si quieres juguetear con la fuente en su navegador.