Hvordan legge til ionikoner i HTML og CSS

Å uttrykke tankene dine med ord kan være litt vanskelig prosess, og lange detaljer om alt kan mangle brukerens oppmerksomhet, derfor kan det være en bedre tilnærming å sette inn ikonene på et nettsted i stedet for tekst. Ikoner har blitt en essensiell del av ethvert nettsted fordi riktig bruk av ikoner kan uttrykke den nøyaktige meldingen i visuell form.

For å legge inn ikoner i et nettsted er det flere ikonsett er tilgjengelige, en av de viktigste blant dem er Ionikoner. De Inoicons er fritt tilgjengelig for alle og kan gi effektive resultater for alle de viktigste plattformene som iOS, skrivebord osv.

Denne oppskrivningen vil presentere en detaljert forståelse av hvordan du bruker Ionikoner I HTML og i denne forbindelse må vi følge følgende konsepter:

• Hva er ionikoner
• Hvordan bruke ionikoner
• Ionicons stiler

La oss begynne

Hva er ionikoner

Det er et fritt tilgjengelig ikonsett som gir mer enn syv hundre ikoner for nesten alle plattformer som Android, Web, Desktop, etc.

Hvordan bruke ionikoner

For å bruke ionikoner, følg trinn-for-trinn-guiden som er gitt nedenfor:

Første skritt

For å legge til ionikoner på et nettsted, er det første du må gjøre å åpne en nettleser og søke etter “Ionikoner”:

Klikk på Ionikoner vil føre deg til følgende side:

Eller klikk her for å besøke det offisielle nettstedet til Ionicons.

Andre trinn

Etterpå må du klikke på bruk Alternativ som nevnt i følgende figur:

Klikk på “Bruk” Alternativet åpner en ny side:

Tredje trinn

Bla litt ned, så finner du en "installasjon" seksjon. Innenfor installasjonsalternativet finner du et par skript:

Kopier både skriptene og lim dem inn i nærheten av det lukkende kroppskoden til HTML -dokumentet eller i hodemerket på websiden din:

Fjerde trinn

Nå kan vi laste ionikonene i HTML -dokumentet vårt. For å gjøre det, gå tilbake til “Bruk” Tab og bla litt ned for å finne “Grunnleggende bruk” Seksjon for å forstå hvordan du bruker Ionicon -komponent:

Femte trinn

Nå, ta turen tilbake til “Ikoner” Tab og søk etter ikonet du ønsker:

Hvis du klikker på ikonet, viser komponentens kode:

Sjette trinn

Kopier koden og lim den inn i HTML -dokumentet ditt:

Følgende vil være utgangen for ovennevnte utdrag:

Utgangen verifiserer at "Ionikoner ” Hjem -ikonet er vellykket lagt til HTML -siden vår. På denne måten kan du sette inn så mange Ionikoner som du vil.

Ionicons stiler

Du kan velge ikonene fra tre forskjellige stiler som vist i det undergitte utdraget:

Eksempel

Dette eksemplet vil bruke et hjemmeioner av alle tre stilene:

Ionikoner i HTML

Ovennevnte utdrag produserer følgende utgang:

Utgangen viser hvordan omriss, fylte og skarpe stiler ser ut. Blant disse stilene jeg.e. Oversikt, fylt, skarpt, kan du velge hvilken som helst stil som passer dine behov.

Konklusjon

For å legge inn et Ionicon i HTML, alt du trenger å gjøre er å kopiere skriptene fra installasjonsdelen av Ionicons og lime dem inn i HTML -dokumentet. Velg deretter Ionicon du velger, kopier komponentkoden og lim den inn i HTML -dokumentet ditt. Denne oppskrivningen gir en detaljert forståelse av hva ionikoner er, og hvordan du implementerer/bruker ionikoner i HTML. Skjermbilder er utstyrt med hvert trinn for en grundig forståelse av konseptene.