Ikonfonter er fantastiske for nettstedet ditt Her er hvorfor

Du har hørt om ikoner, og du har nesten sikkert hørt om skrifter, men hva er en Ikon skrifttype? I dag skal jeg vise deg hvilke ikonfonter som er, og hvordan du kan bruke dem til å gi liv på nettstedet ditt. La oss komme i gang.

Hva er ikonfonter?

Ikon skrifter er akkurat det samme som “regelmessig” fonter - de definerer utseendet på et stykke tekst. Den store forskjellen er at ikonfonter ikke inneholder bokstaver og tall, men symboler og ikoner. Du kan bli forvirret av dette, som det er en skrifttype hvis du ikke kan skrive brev til din mor!

Ikon skrifter er først og fremst brukt til å style nettsteder. Som de er vektorbaserte, kan de endres, flyttes, stiles og endres ved hjelp av CSS 5 Baby trinn til å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Baby trinn for å lære CSS og bli en Kick-Ass CSS Sorcerer CSS er den Enkelt viktigste endringswebsider har sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer. Dette gir en stor fordel i forhold til tradisjonelle designmetoder som bilder. Utseendet på et stort antall ikoner kan endres med bare noen få linjer med kode. Du trenger ikke å redigere noen bilder, åpne Photoshop, eller laste opp de nye filene - du skriver bare kode.

Starter

Jeg bruker Font Awesome for disse eksemplene, men teorien kan brukes til mange andre fontpakker.

Her er startpakken HTML:

Dette er den minste mengden HTML som kreves for å produsere en nettside. Jeg vil ikke forklare det meste av det, da vi har dekket det i vår guide om hvordan du lager et nettsted.

Den viktigste linjen er følgende:

Dette laster Font Awesome stilark fra CDN. Uten denne linjen vil nettstedet ditt ikke vite hva Font Awesome er, så det er ganske viktig. Dette stilarket håndterer alt det harde arbeidet med å legge inn webfonter, og gjør det vanligvis mye enklere for deg.

Font Awesome ikoner er definert av CSS klasser lagt til Jeg tags. Disse ble valgt fordi de ikke har noen nettleser eller standarddefinert styling knyttet til dem, så ikonene dine vil ikke bli ødelagt. Alternativt kan du legge til klassene til span tagger, men det bryr opp HTML-en din.

Her er den grunnleggende bruken. Sett dette inn i din kropp tags:

 Mitt første ikon

Her ser det ut som:

Hvor lett var det? La oss slå det ned. Det er to klasser som trengs for Font Awesome å jobbe. Den første er kalt fa, som står for Font Awesome. Dette er nødvendig for et hvilket som helst ikon, uansett hvilken du bruker. Den andre klassen angir det bestemte ikonet du vil bruke - dette kan være alt, et fly, en person eller et kredittkort. Dette er også prefiks med fa, og da dette er et tannhjulikon, heter det fa-cog. Du kan se en liste over alle ikonene i Font Awesome på deres hjemmeside.

Prøv å endre ikonet fra tannhjulet til en annen.

Går dypere

Når du vet det grunnleggende, er det tid for noen avanserte triks.

Hvis du ikke vil skrive ditt eget CSS, kan du bruke stilene som er bygget rett inn i Font Awesome. Det er mange klasser du kan bruke til å gjøre ikoner større:

En annen nyttig klasse å bruke er fa-spin. Dette vil gjøre at ikonene roterer, og når de kombineres med forrige størrelsesklasser, kan du produsere noen fine effekter. Her er koden:

Her er resultatet:

Det er enkelt å rotere ikoner - bruk fa rotering klasse:

Tallet på slutten definerer rotasjonsgrader for ikonet, men blir ikke båret bort. Du er begrenset til 90, 180, eller 270.

Et siste triks du kan gjøre er å stable. De fa-stabel klassen lar deg kombinere to eller flere ikoner sammen. Her er koden:

Her ser det ut som:

Når du begynner å kombinere alle disse ulike klassene, er mulighetene egentlig uendelige.

Tilpasset CSS

Fordi ikonfonter er bare fonter, du kan stile dem med CSS akkurat som du ville noe annet element. Å bruke en liten CSS3 kan gå langt:

Her er HTML for det ikonet:

Her er CSS:

@keyframes flytte fra margin-left: 0;  til margin-left: 400px;  .bike animasjon-navn: flytte; animasjon-varighet: 4s; 

Dette CSS er ganske grunnleggende, men det har stor innvirkning. Dette er ikke en CSS-opplæring selv, så du vil kanskje lære CSS De neste trinnene på vei til å bli en CSS Jedi-master De neste trinnene på vei til å bli en CSS Jedi Master CSS er absolutt en av de viktigste teknologiene rundt på internett i dag, og mens de fleste innrømmer å vite litt HTML, er vi generelt ikke klare for CSS. Siste gang jeg introduserte deg ... Les mer hvis du vil vite mer om de indre arbeidene.

Du kan gjøre noen spesielle ting hvis du virkelig vil:

Dette stutter litt for å redusere filstørrelsen for nettet. Her er HTML:

Her er CSS:

@keyframes fade fra opacity: 0;  til opacity: 1;  .person oppacity: 0; animasjon-navn: fade;  # p1 farge: rød; animasjon-varighet: 2s;  # p2 farge: oransje; animasjon-varighet: 4s;  # p3 farge: grønn; animasjon-varighet: 6s;  # p4 animasjon-varighet: 8s; 

Som forrige eksempel bruker dette CSS3 animasjoner. En animasjon kalt falme er opprettet, og hver person-ikon implementerer denne animasjonen med varierende tidspunkter. Det er mye potensial til å bli vill med disse ikonene og CSS3.

Det var alt for i dag. Du bør nå kunne bruke ikonfonter til å gi liv på nettstedet ditt! Hvis du ikke er så sikker på dine ferdigheter ennå, sjekk ut disse CSS templatene 11 CSS Template Sites: Ikke start fra scratch! 11 CSS-malingssider: Ikke start fra begynnelsen! Det finnes tusenvis av gratis CSS-maler tilgjengelig online, som alle omfatter moderne designtrender og teknologier. Du kan bruke dem i sin opprinnelige form, eller tilpasse dem for å gjøre dem dine egne. Les mer, eller disse YouTube-kanalene for å komme i gang Ønsker du å lære Webdesign? 7 YouTube-kanaler for å få deg i gang Vil du lære Webdesign? 7 YouTube-kanaler for å få deg i gang YouTube har tusenvis av videoer og kanaler for nybegynnere i webdesign. Her ser vi på noen av de beste for å komme i gang. Les mer med webdesign.

Lærte du noe nytt i dag? Hva er din favoritt ikonfont? Gi oss beskjed i kommentarene nedenfor!

Utforsk mer om: CSS, HTML, Web Design.