En una lección anterior, aprendiste como incluir imágenes en tu página web. A veces, la gente no está realmente segura donde encontrar imágenes o no son muy buenos artistas. Así que hoy, quiero hablar acerca de como usar Font Awesome. Font Awesome es una colección de iconos que puedes usar para tu página web y son reconocidos en todo el mundo. Aquí estoy en la página de Font Awesome. Quiero mostrarte cómo usarla. Lo primero que voy a hacer es ir a la sección de iconos. Como puedes ver, hay miles de diferentes icono que puedes elegir para ayudarte a decorar tu página y es muy fácil de usar. El primer paso es decirle a tu página web, oye, quiero usar Font Awesome. En la sección de inicio de Font Awesome, te dan el código. Déjame mostrarte como se ve. Aquí estoy en un archivo sencillo. Lo único que te parecerá nuevo es que tengo dos ideas únicas. La primera es que tengo un enlace en la sección de mi página. Recuerda, en mantenemos toda esa información extra que no siempre es vista por el usuario, y lo que he hecho aquí es conectarme a Font Awesome CDN. Es un acrónimo muy intimidante que solo significa Content Delivery Network. Básicamente estás haciendo un acuerdo donde, oye, Voy poner un enlace y usar tu material, pero voy a usar este enlace especial para que sepas cuántas personas lo están usando. Si bajamos a la sección , es cuando vas a ver una nueva etiqueta, la etiqueta , significa "icono". ¿Recuerdas la etiqueta de imagen? Una de las cosas que necesitas tener si vas a usar la etiqueta de imagen es la fuente, cuál imagen quieres usar. Con Font Awesome, tienes que incluir una etiqueta de clase, y en esa etiqueta de clase, vas a decirle qué imagen quieres usar. Así que en este caso Estoy usando la que se llama fa-angry. Veamos cómo se va a ver esta página. Bueno, terminamos con una pequeña persona enojada que nos mira. En realidad es muy sencillo. Cada vez que incluyes esta etiqueta, obtienes un pequeño icono. En toda honestidad, hemos ampliado mucho mi pantalla, así que si tú ejecutas este código, el icono sería muy pequeño. Veamos algunas de las opciones que pueden usar para ajustar el tamaño de su icono. Así que lo que he hecho es copiar esa línea de código un par de veces y en cada uno, Añadí un atributo extra y ese es el tamaño que quiero que tenga el icono. Así que aquí mismo, les pedí que ese icono fuera extra pequeño y luego mediano y grande. La 2x, 3x, 5x, 10x, etc., eso nos dice qué tan grande debe ser. Ahora, si miro la página de nuevo, definitivamente se verá un poco diferente. De hecho, es demasiado grande para la pantalla, así que deja que lo hago un poco más pequeño, y ahí lo tienes. Tenemos los iconos con diferentes tamaños. La cara enojada claramente no es la única que puedes hacer. Algunos de los más populares que puedes ver incluyen la tarjeta de dirección. Así que voy a copiarlo. Siempre empieza con la etiqueta "i" con class=, necesitas poner "fas" para Font Awesome, y luego en lugar de enojada, vamos a intentar con una tarjeta de dirección. Espero que esto te resulte familiar. Voy a poner un salto de página sólo para mezclar un poco las cosas allí. Ahora, cuando refresco la página, puedes ver una pequeña tarjeta de dirección muy familiar. Los iconos son geniales porque le dan a tu página este tipo de apariencia realmente familiar que la gente cree que ve realmente profesional. Pero hay algunas desventajas en el uso de los iconos si no tienes cuidado. Lo más importante es que no son necesariamente accesibles por defecto. Si fueras a usar un lector de pantalla en esta página, realmente se vería como si no hubiera ningún contenido en absoluto. O peor aún, a veces la gente usa iconos para los enlaces de los medios sociales. Déjame mostrarte un ejemplo más antes de que terminemos con Font Awesome. Así que lo que he hecho aquí es en lugar de usar iconos solo como decoración, En realidad los he puesto en mi sitio por lo que, si deseo incluir un enlace a mi cuenta de Twitter, justo aquí abajo, incluiría el icono de Twitter. Si quiero conectarme a Pinterest, Podría usar este icono de Pinterest justo ahí, y LinkedIn, y en realidad se ve muy bien. Déjame mostrarte. Aquí vamos, tengo cada uno de mis enlaces. Para que sepas, la razón por la que estos iconos son azules es, una vez más, porque son enlaces, y podría hacer clic en cada uno y me llevaría a mi cuenta. Este es el problema. Se ve muy bien, pero voy a correr rápidamente el validador Wave para ver si mi código es semánticamente correcto. Así que voy a ir a mi versión hospedada. ¿Está aquí? Déjame encontrarlo. Así que no estoy usando el código que estaba usando porque para validarlo, Quiero ponerlo en el servidor. Así que voy a subir y voy a hacer clic en mi herramienta de validación Wave, y Wave va examinar el código y me va a dar tres errores. No son tres errores cualquiera, pero tres errores muy importantes, y eso es simplemente eso, oye, tienes tres enlaces y no tienen ningún texto. Alguien que esté un lector de pantalla no tendría ni idea de a dónde te va a llevar este enlace. No sabe que esto es Twitter, Pinterest o LinkedIn. Pero tengo una solución rápida muy simple para eso. Voy a usar algo llamado etiqueta de aria ya sea mi etiqueta o también en mi etiqueta de icono. Simplemente pongo "aria-label=" y en este caso, voy a poner Twitter. En la siguiente, puedo agregar aria-label=Pinterest, etc. Al agregar estas etiquetas de aria, básicamente les estás dando a los lectores de pantalla la capacidad de decirle a alguien a donde va este enlace de leer una etiqueta, y esto es sumamente importante en términos de accesibilidad. Así que espero que te diviertas usando Font Awesome. Hay tantas diferentes que puedes elegir pero si vas a jugar con algunos de estos trucos geniales, asegúrate de que los haces accesibles a la mayor cantidad de gente posible.