Fjærikoner er en samling av skrifter som kan brukes i applikasjoner og nettsteder. Den tilbyr skalerbare vektorkonser som kan tilpasses med tanke på skygge, farge, størrelse og all annen egenskap som CSS kan håndtere. Utviklere og designere som jobber med forskjellige plattformer kan laste ned den økende fjærfontikonsamlingen og bruke den i henhold til deres preferanser.

Denne oppskrivningen vil diskutere metoden til Bruk fjærikoner i Html og CSS. Videre vil eksempler relatert til den spesifiserte prosedyren bli gitt. Så la oss starte!

Merk: Før du går mot, må du forsikre deg om at du har installert fjærikoner. Hvis du ikke har det allerede, så følg den undergitte delen.

Hvordan installere fjærikoner

Det er forskjellige metoder for å installere fjærikoner; Imidlertid har vi samlet den enkleste for deg å legge inn fjærikoner i HTML og CSS uten problemer.

Metode 1: Installere fjærikoner ved hjelp av CDN

Innholdsleveringsnettverk (CDN) gir tilgang til JavaScript -filene som brukes av mennesker over hele verden. Du kan bruke hvilken som helst av følgende koblinger for å legge til fjærikoner i HTML -filen din:

ELLER

Metode 2: Installere fjærikoner ved hjelp av NPM -bibliotek

“Fjærikoner”Er et NPM -bibliotek som brukes til å integrere fjærfont i alle JavaScript -applikasjoner. Hvis du vil installere fjærikoner ved hjelp av NPM -biblioteket, må du utføre denne kommandoen i terminalen:

npm installer fjær -icons -lave

Metode 3: Installere fjærikoner ved å laste ned samlingen

Først av alt, last ned glidelås -mappen til fjærikonene og kopier deretter “font/”Og“CSS/”Kataloger til prosjektet ditt. Gå deretter til HTML -filen din og spesifiser banen til "Feathicon.min.CSS”-Filen i“" stikkord:

Hvordan bruke fjærikoner i HTML og CSS

For å demonstrere prosedyren for å bruke fjærikoner i HTML og CSS, vil vi lage en ny HTML -fil som heter “myfile.html”I Visual Studio Code:

I “myfile.html”Film, for det første, vil vi legge til lenken til fjærikonpakken som kilde, innenfor“" stikkord:

Deretter vil vi spesifisere ikonene ved å bruke "Datafjær”Attributtverdi i stikkord. Du kan se fra den gitte koden, vi bruker "stjerne”,“torget”,“klokke”, Og“tildele”Fjærikoner i HTML -fil:

Vi bruker fjærikoner i HTML og CSS

Til slutt vil vi påkalle fjæren.Erstatt () Metode for å erstatte DOM -elementene med de tilførte fjærikonene:

Slik ser den komplette koden ut i vår “myfile.html”:

Åpne filen i nettleseren og sjekk ut fjærikonene som vi har brukt i "myfile.html”Fil:

På dette tidspunktet har du satt den grunnleggende utformingen av fjærikonene i HTML -filen. Så nå, hvis du vil tilpasse fjærikonstilen, kan du utføre denne operasjonen ved hjelp av CSS.

I vår "stil.CSS”Fil, vi vil definere tre klasser for å angi størrelsen på fjærikonene:

.Feather-10
Bredde: 10px;
Høyde: 10px;

.Feather-24
Bredde: 24px;
Høyde: 24px;

.Feather-48
Bredde: 48px;
Høyde: 48px;

For å bruke disse innstillingene på et fjærikon, må du nevne den nødvendige CSS -klassen på følgende måte:

Lagre igjen HTML -filen din, åpne den for din favoritt nettleser, og legg merke til forskjellen i stylingen av fjærikonene:

Det handlet om grunnleggende bruk av fjærikoner i HTML og CSS. For å utforske videre, sjekk ut fjærikonets dokumentasjon.

Konklusjon

For å bruke fjærikoner i HTML og CSS, må du installere dem først ved hjelp av CDN, NPM -bibliotek, eller ved å laste ned de relaterte filene fra det offisielle nettstedet. Etter å ha installert fjærikoner, kan du integrere den vakre samlingen av ikoner og style dem i henhold til dine preferanser ved hjelp av CSS. Denne oppskrivningen diskuterte metoden for å bruke fjærikoner i HTML og CSS. Videre er eksempler relatert til den spesifiserte prosedyren også gitt.