【HTML】Agregar y Mostrar Iconos | Usando FontAwesome y Material Icons

Este artículo explica cómo mostrar iconos y caracteres especiales en HTML usando FontAwesome y Material Icons.

🔹 Código parcial

<span class="fa fa-camera"></span> Tomar una foto

💻 Código completo en funcionamiento (Este código solo necesita ser copiado y pegado en HTML)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mostrar iconos</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <span class="fa fa-camera"></span> Tomar una foto
</body>
</html>

📚 Fuentes de iconos: Mecanismo y usos prácticos

El uso del elemento para mostrar iconos es un método ampliamente adoptado en el desarrollo web moderno. Con un código simple como , se pueden mostrar una variedad de iconos.

El núcleo de las fuentes de iconos

FontAwesome y Material Icons utilizan una tecnología llamada "fuentes de iconos". Esto significa que cada icono se trata como un carácter de una fuente especial. Esto se logra especificando la propiedad font-family con una fuente específica. En algunos casos, también se utilizan el pseudo-elemento ::before y la propiedad content en CSS para mostrar los iconos.

Aplicaciones prácticas en proyectos

En los menús de navegación, puedes usar algo como  Inicio. Además, al agregar send en un botón, puedes incrustar fácilmente el icono de enviar. Para el diseño responsive, puedes establecer font-size en unidades % o vw, lo que hará que el icono se ajuste según el tamaño de la pantalla.

Es importante señalar que el uso de la etiqueta  está quedando obsoleto y el uso de es la forma moderna de mostrar iconos. Al utilizar CDNs para cargar iconos, se requiere una conexión a la red. Para usarlos sin conexión, debes descargar los archivos localmente.

Para lograr una interfaz de usuario consistente en un proyecto, se recomienda establecer el tamaño de los iconos utilizando unidades rem y gestionar los colores con variables CSS. Por ejemplo, puedes definirlo de esta manera: .icon { font-size: 1.2rem; color: var(--primary-color); }, lo que te permitirá cambiar fácilmente todos los iconos de manera coherente.

¡Copiado!