Búsqueda de iconos de Font Awesome

Funciones

• Más de 2000 iconos en las tres variantes solid, regular y brands
• Coincidencia en tres capas (nombre, etiqueta, términos de búsqueda) ordenada por capa: primero las coincidencias por nombre
• Varias palabras deben coincidir todas: `arrow up` devuelve solo los iconos que contienen ambas
• Los guiones separan palabras, así que `arrow right` encuentra `arrow-right`
• Filtro por estilo (los iconos de marca solo existen en brands)
• Al pulsar un icono, cuatro usos: clase, SVG en línea, Unicode y entidad HTML, cada uno copiable
• Los iconos se sirven desde el sprite oficial con `<use>`, un nodo DOM por icono, así que decenas por página salen baratas
• Índice e iconos alojados aquí, así que funciona sin conexión; la atribución aparece bajo la cuadrícula como pide la licencia

Cómo se usa

1. Escribe un nombre o un significado en el buscador; si una palabra en español no encuentra nada, prueba en inglés
2. Filtra por estilo si hace falta (los iconos de marca están en brands)
3. Pulsa un icono para ver sus cuatro usos
4. Copia el que necesites y pégalo en tu proyecto

Preguntas frecuentes

¿Se pueden usar estos iconos comercialmente?

Sí. Los iconos de Font Awesome Free son CC BY 4.0: se permite el uso comercial, la modificación y la redistribución, y el único requisito es la atribución (basta con listar Font Awesome y Fonticons, Inc. en la página de licencias de tu proyecto). Las fuentes son SIL OFL 1.1 y el código es MIT: las tres son mucho más permisivas que eso de «la versión gratis no vale para uso comercial», pero las tres exigen conservar el aviso.

¿Por qué buscar una palabra en español no encuentra nada?

Porque los nombres, las etiquetas y los términos de búsqueda son todos en inglés: son los datos de Font Awesome, sin traducción. Así que busca en inglés: a la idea de subir le corresponde `upload` (que da `arrow-up-from-bracket`), a compartir, `share`, y a borrar, `trash` o `delete`. Si piensas en otro idioma, pregúntate cómo se llama la acción en inglés; es también la razón de que cada resultado muestre por qué capa coincidió.

¿Uso la clase o el SVG en línea?

Depende de si tu proyecto ya carga Font Awesome. Si lo hace (unos cientos de KB de CSS, o la versión JS cargando iconos a demanda), usa la clase `<i class="fa-solid fa-house">`: es fácil de reestilizar para tamaño y color, y se cachea con tu CSS. Si no lo carga, no metas FA por unos pocos iconos: usa el SVG en línea, `<svg><use href="/fa-sprites/solid.svg#house"></use></svg>`, o incrusta los datos del trazado. Todo lo que hay aquí se puede copiar y pegar; el fragmento del SVG en línea apunta al sprite de este sitio, así que recuerda copiar ese sprite a tu propio proyecto.

¿Cuándo usaría las formas Unicode?

En situaciones de fuente de iconos: `\f015` es la forma CSS (`content: "\f015"` con un pseudoelemento, o un botón de icono con `::before`) y `&#xf015;` es la forma de entidad HTML. Ninguna necesita un nombre de clase, y el coste es la legibilidad: quien lee el código no sabe qué es `\f015`. Úsalas solo donde lo merezcan, por ejemplo un icono puramente decorativo con un pseudoelemento, donde la alternativa sería un elemento vacío de más en el HTML.