Hvordan bruke Google -ikoner i HTML & CSS?

Ikoner er visuelle fremstillinger av forskjellige handlinger, programmer eller filer og kan spille en veldig viktig rolle i nettsteddesign. De kan forbedre det generelle utseendet på nettstedet og vise seg å være en god kilde til å tiltrekke seg mer publikum til nettstedet ditt. Ikoner gir enkel navigasjon, og øker dermed brukeropplevelsen. Det er et stort utvalg av ikoner som du kan legge til på nettstedet ditt, men denne artikkelen er designet for å veilede deg om hvordan du bruker Google -ikoner i HTML & CSS.

Temaer som er utforsket i denne oppskrivningen er:

1. Hva er Google -ikoner?
2. Hvordan legge til et Google -ikon?
3. Endre størrelse på et Google -ikon
4. Endre fargen på et Google -ikon

La oss begynne.

Hva er Google -ikoner?

Google gir et stort utvalg av ikoner (totalt 750) som blir sett på som materialdesignikoner. Disse ikonene er vanlige, men likevel moderne og representerer handlinger eller objekter som ofte brukes. For eksempel representerer et søppelbinikon. Disse ikonene støttes av alle dagens nettlesere. Skjermbildet vedlagt nedenfor viser noen av materialdesignikonene.

Nå som vi vet hva Google -ikoner er, la oss lære å legge dem til på websider.

Hvordan legge til et Google -ikon?

For å legge til Google Material Design-ikoner til nettstedene dine, følg de under-nevnte trinnene.

Trinn 1
Første trinn er å legge til lenken til materialikons fontbibliotek i delen av HTML-filen din. Slik gjør du det.

Steg 2
Når du har lagt til lenken til Material-Icons-biblioteket, er neste trinn å legge til klassen "Material-Icons" i eller taggen til seksjonen og legg også til navnet på ikonet.

wifi

Eksempel 1
I dette eksemplet blir et innstillingsikon lagt til på websiden.

Innstillinger

Produksjon

Innstillingsikonet er lagt til.

Eksempel 2
I eksemplet nedenfor blir det lagt til et logoutikon på websiden.

Logg ut

Produksjon

Logout -ikonet har satt inn.

Du kan også endre størrelsen på disse materialdesignikonene ved hjelp av CSS. La oss utforske det i detalj.

Endre størrelse på et Google -ikon

Du kan endre størrelsen på Google Material Design -ikoner i henhold til ditt ønske ved å bruke CSS. Følg trinnene som er nevnt i denne delen for å endre størrelse på Google Material Design -ikonet.

Trinn 1
I taggen ved hjelp av Material-Icons-klassen definerer for eksempel størrelsen på ikonet.

Steg 2
Bruk den samme klassen i Tag sammen med ikonnavnet.

Innstillinger

Produksjon

Størrelsen på innstillingsikonet endret seg vellykket.

Foruten størrelse, kan du også endre fargen på Google -ikonene. La oss se hvordan det gjøres.

Endre fargen et Google -ikon

For å endre fargen på Google Material Design-ikoner, følg de samme trinnene som nevnt i ovennevnte avsnitt med en liten forskjell at du sammen med fontstørrelsen kan måtte definere fargen ved å bruke CSS-fargeegenskapen til CSS.

Eksempel
Anta at du vil endre fargen på innstillingsikonet til blått.

Innstillinger

Produksjon

Fargen på innstillingsikonet endret seg vellykket.

Konklusjon

For å legge inn Google-ikoner på HTML-websidene dine, må du legge til lenken til Font-biblioteket i materialisoner i delen av HTML-filen din og deretter legge til klassesmaterialikonene i den eller taggen til seksjonen sammen med navnet på ikonet. Du kan også endre størrelsen og fargen på ikonene gjennom CSS ved å definere dem i taggen ved hjelp av Material-Icons-klassen. Denne oppskrivningen diskuterer hvordan du bruker Google-ikoner i HTML & CSS i dybden ved hjelp av passende eksempler.