Iconos para paginas web html

iconos en html einbinden

Un icono HTML es una pequeña imagen que puede codificarse con el lenguaje de marcado de hipertexto, o HTML, en una página web o en la configuración del navegador. Los lenguajes de marcado como el HTML permiten la presencia de iconos en varias partes de un sitio web que a menudo identifican la fuente de una página o proyecto. Un tipo común de icono HTML se conoce como favicon, o icono del sitio web. Este tipo de icono aparece en la barra de direcciones del navegador y en una lista de favoritos.

Los iconos HTML se pueden construir en varios tamaños. El estándar para algunos tipos comunes de iconos es de 16 x 16 píxeles. Por lo general, no se trata de imágenes de alta resolución, sino de pequeñas imágenes estilizadas que muestran un sencillo logotipo que representa a la empresa o parte que mantiene un determinado sitio web.

Los usuarios de iconos HTML se benefician de un proceso llamado estandarización, que establece cómo se incluyen los iconos en los proyectos web. Este tipo de estándar es administrado por el World Wide Web Consortium, o W3C, una organización responsable de mantener una amplia gama de estándares para HTML. El estándar para los iconos HTML incluye un elemento de enlace en una parte específica de un documento HTML para designar la inclusión de un icono HTML.

iconos de font awesome 4

Como describimos en nuestro anterior artículo sobre las fuentes de iconos, éstas son fuentes basadas en vectores que contienen pictogramas funcionales en lugar de letras. Los desarrolladores web que utilizan fuentes de iconos se benefician enormemente de los vectores libremente escalables. A diferencia de las fuentes de píxeles, las fuentes vectoriales se definen en primitivas gráficas como líneas, círculos, polígonos y curvas, independientemente de los dispositivos de salida. Esto permite una fácil transformación sin pérdida de datos basada en CSS; de este modo, los iconos correspondientes no tienen que cargarse y ajustarse por separado en un programa gráfico. En lugar de ello, el navegador web se encarga de aplicar el formato basado en el código.    Para ello, el archivo CSS con las fuentes de los iconos debe incluirse en la cabecera HTML. Posteriormente, los iconos individuales pueden integrarse mediante el atributo HTML «class» en la página web. Sigue leyendo para saber cómo funciona esto utilizando la popular fuente de código abierto, Font Awesome. Página de inicio de ‘Font Awesome’ (Fuente: http://fontawesome.io)Insertar iconos con Font AwesomeFont Awesome cuenta con más de 600 iconos, lo que la convierte en una de las mayores colecciones de símbolos basados en vectores. Las fuentes pictográficas están disponibles de forma gratuita. Para integrar la fuente de iconos en la página web, sólo necesitas su kit de instalación. Éste se puede descargar desde el sitio web de Font Awesome. Estos son los tres pasos para integrar sus fuentes de iconos:El código de incrustación de cada icono está documentado en el sitio web de Font Awesome.

iconos html

Como describimos en nuestro anterior artículo sobre las fuentes de iconos, éstas son fuentes basadas en vectores que contienen pictogramas funcionales en lugar de letras. Los desarrolladores web que utilizan fuentes de iconos se benefician enormemente de los vectores libremente escalables. A diferencia de las fuentes de píxeles, las fuentes vectoriales se definen en primitivas gráficas como líneas, círculos, polígonos y curvas, independientemente de los dispositivos de salida. Esto permite una fácil transformación sin pérdida de datos basada en CSS; de este modo, los iconos correspondientes no tienen que cargarse y ajustarse por separado en un programa gráfico. En lugar de ello, el navegador web se encarga de aplicar el formato basado en el código.    Para ello, el archivo CSS con las fuentes de los iconos debe incluirse en la cabecera HTML. Posteriormente, los iconos individuales pueden integrarse mediante el atributo HTML «class» en la página web. Sigue leyendo para saber cómo funciona esto utilizando la popular fuente de código abierto, Font Awesome.

Font Awesome cuenta con más de 600 iconos, lo que la convierte en una de las mayores colecciones de símbolos vectoriales. Las fuentes pictográficas están disponibles de forma gratuita. Para integrar la fuente de iconos en la página web, sólo necesitas su kit de instalación. Éste se puede descargar desde el sitio web de Font Awesome. Estos son los tres pasos para integrar sus fuentes de iconos:

pestaña de iconos html

El uso de iconos en el diseño web es un método probado para modernizar un sitio web y ayudar a dirigir el flujo de usuarios. La adición de iconos al contenido de su sitio web ayuda al usuario a procesar mejor la información que usted está tratando de transmitir y proporciona un punto de enfoque visual que se basa un usuario a una sección específica.

Los iconos gráficos se pueden utilizar de muchas maneras para animar su proyecto de diseño web. Puedes utilizarlos como acompañamiento visual de áreas de texto o como enlaces independientes en situaciones en las que el espacio es reducido y los bloques de texto no son factibles dentro del diseño. Es esta versatilidad de los iconos la que los hace tan útiles y extendidos.

Afortunadamente, no hace falta que te pongas a crear tu propio conjunto de iconos. Font Awesome proporciona un marco versátil que incorpora casi cualquier gráfico de icono que puedas imaginar junto con la escalabilidad y las capacidades de personalización necesarias. Font Awesome le ahorrará casi con seguridad tiempo y dinero en su aplicación de iconos específicos. El siguiente artículo le guiará a través de la incorporación de los iconos de Font Awesome para optimizar su proyecto de diseño web.