Cómo agregar Ionicons en HTML y CSS

Expresar sus pensamientos en palabras puede ser un proceso un poco difícil y los detalles largos sobre cualquier cosa pueden carecer de la atención del usuario, por lo tanto, insertar los iconos en un sitio web en lugar de texto puede ser un mejor enfoque. Los iconos se han convertido en una parte esencial de cualquier sitio web porque el uso adecuado de los iconos puede expresar el mensaje exacto en forma visual.

Para incrustar los iconos en un sitio web hay múltiples conjuntos de iconos disponibles, uno de los más significativos entre ellos es Ionicones. El Inoicones están disponibles gratuitamente para todos y pueden proporcionar resultados efectivos para todas las plataformas principales como iOS, escritorio, etc.

Esta redacción presentará una comprensión detallada de cómo usar Ionicones En HTML y en este sentido tenemos que seguir los siguientes conceptos:

• ¿Qué son los Ionicons?
• Cómo usar Ionicons
• Estilos de Ionicons

Empecemos

¿Qué son los Ionicons?

Es un conjunto de iconos de acceso libre que proporciona más de setecientos iconos para casi todas las plataformas, como Android, Web, Desktop, etc.

Cómo usar Ionicons

Para usar Ionicons, siga la guía paso a paso que se proporciona a continuación:

Primer paso

Para agregar Ionicons en un sitio web, lo primero que debe hacer es abrir un navegador web y buscar el "Ionicons":

Haciendo clic en el Ionicones te llevará a la siguiente página:

O haga clic aquí para visitar el sitio web oficial de Ionicons.

Segundo paso

Después, debe hacer clic en el uso Opción como se menciona en la siguiente figura:

Haciendo clic en el "Uso" La opción abrirá una nueva página:

Tercer paso

Desplácese hacia abajo un poco y encontrará un "instalación" sección. Dentro de la opción de instalación, encontrará un par de scripts:

Copie ambos scripts y péguelos cerca de la etiqueta de cuerpo de cierre de su documento HTML o en la etiqueta principal de su página web:

Cuarto paso

Ahora, podemos cargar los Ionicons en nuestro documento HTML. Para hacerlo, regrese al "Uso" pestaña y desplácese hacia abajo un poco para encontrar el "Uso básico" Sección para comprender cómo usar el componente Ionicon:

Quinto paso

Ahora, regresa al "Íconos" pestaña y busque el icono de su elección:

Al hacer clic en el icono, se mostrará el código del componente:

Sexto paso

Copie el código y péguelo en su documento HTML:

El siguiente será la salida para el fragmento de anteriores:

La salida verifica que el "Ionicons " Home Icon se agrega con éxito a nuestra página HTML. De esta manera, puede insertar tantos Ionicones Como quieras.

Estilos de Ionicons

Puede seleccionar los iconos de tres estilos diferentes como se muestra en el fragmento dado a continuación:

Ejemplo

Este ejemplo utilizará un hogar Ionicons de los tres estilos:

Ionicons en HTML

El fragmento de anteriores produce la siguiente salida:

La salida muestra cómo se ven los estilos de contorno, relleno y afilado. Entre estos estilos yo.mi. Esquema, lleno, nítido, puede elegir cualquier estilo que se adapte a sus necesidades.

Conclusión

Para incrustar un Ionicon en HTML, todo lo que tiene que hacer es copiar los scripts de la sección de instalación de los Ionicons y pegarlos en su documento HTML. Después, seleccione el Ionicon de su elección, copie el código de componente y péguelo en su documento HTML. Este artículo proporciona una comprensión detallada de lo que son los Ionicons y cómo implementar/usar Ionicons en HTML. Las capturas de pantalla se proporcionan con cada paso para una comprensión profunda de los conceptos.