Cómo usar íconos de plumas en HTML y CSS
Este artículo discutirá el método para Use íconos de plumas en Html y CSS. Además, se proporcionarán ejemplos relacionados con el procedimiento especificado. Entonces, comencemos!
Nota: Antes de avanzar, asegúrese de haber instalado íconos de plumas. Si aún no lo tiene, siga la sección dada de abajo.
Cómo instalar iconos de plumas
Existen varios métodos para instalar iconos de plumas; Sin embargo, hemos compilado el más fácil para incrustar los iconos de plumas en HTML y CSS sin ninguna molestia.
Método 1: Instalación de iconos de plumas usando CDN
Red de entrega de contenidos (CDN) proporciona acceso a los archivos JavaScript que utilizan personas de todo el mundo. Puede usar cualquiera de los siguientes enlaces para agregar iconos de plumas a su archivo HTML:
O
Método 2: Instalación de iconos de plumas utilizando la biblioteca NPM
"plumas"Es una biblioteca NPM utilizada para integrar la fuente de plumas en cualquier aplicación JavaScript. Si desea instalar iconos de Feather utilizando la biblioteca NPM, debe ejecutar este comando en el terminal:
NPM Instalar Feather -Icons -Save
Método 3: Instalación de iconos de plumas descargando su colección
En primer lugar, descargue la carpeta contejada de los iconos de las plumas y luego copie el "fuente/" y "CSS/"Directorios para su proyecto. A continuación, muévase a su archivo HTML y especifique la ruta del "plemero.mínimo.CSS"Archivo en el"" etiqueta:
Cómo usar íconos de plumas en HTML y CSS
Para demostrar el procedimiento de usar íconos de plumas en HTML y CSS, crearemos un nuevo archivo HTML llamado "mi archivo.html"En Visual Studio Code:
En "mi archivo.html"Archivo, en primer lugar, agregaremos el enlace del paquete de iconos de Feather como fuente, dentro del"" etiqueta:
Luego, especificaremos los iconos usando "pluma de datos"Valor de atributo en el etiqueta. Puede ver desde el código dado, estamos usando "estrella","cuadrado","campana", y "otorgarIconos de plumas en el archivo HTML:
Estamos utilizando iconos de plumas en HTML y CSS
Por último, invocaremos la pluma.Método reemplazar () para reemplazar los elementos DOM con los iconos de plumas agregados:
Así es como se ve el código completo en nuestro "mi archivo.html":
Abra el archivo en el navegador y consulte los iconos de plumas que hemos utilizado en el "mi archivo.html" archivo:
En este punto, ha establecido el diseño básico de los iconos de las plumas en el archivo HTML. Entonces, ahora, si desea personalizar el estilo de iconos de plumas, puede realizar esta operación con la ayuda de CSS.
En nuestro "estilo.CSS"Archivo, definiremos tres clases para establecer el tamaño de los iconos de Feather:
.Feather-10Ancho: 10px;
Altura: 10px;
.Feather-24
Ancho: 24px;
Altura: 24px;
.Feather-48
Ancho: 48px;
Altura: 48px;
Para aplicar estas configuraciones a un icono de pluma, debe mencionar la clase CSS requerida de la siguiente manera:
Nuevamente, guarde su archivo HTML, ábralo a su navegador favorito y tenga en cuenta la diferencia en el estilo de los iconos de las plumas:
Eso se trataba del uso básico de iconos de plumas en HTML y CSS. Para explorar más, consulte la documentación de los iconos de plumas.
Conclusión
Para usar iconos de plumas en HTML y CSS, primero debe instalarlos usando CDN, Biblioteca NPM o descargando sus archivos relacionados desde el sitio web oficial. Después de instalar iconos de plumas, puede integrar su hermosa colección de iconos y diseñarlos de acuerdo con sus preferencias utilizando CSS. Este artículo sobre el método para usar iconos de plumas en HTML y CSS. Además, también se proporcionan ejemplos relacionados con el procedimiento especificado.