Ikon skrifter er fantastisk for nettstedet ditt: Her er grunnen

Annonse

Du har hørt om ikoner, og du har nesten helt sikkert hørt om skrifter, men hva er en Ikon Font? I dag viser jeg deg hva ikonskrifter er, og hvordan du kan bruke dem til å livliggjøre nettstedet ditt. La oss komme i gang.

Hva er ikonskrifter?

Ikonfonter er nøyaktig det samme som "vanlige" skrifter - de definerer utseendet og følelsen av et stykke tekst. Den store forskjellen her er at ikonfonter ikke inneholder bokstaver og tall, men symboler og ikoner. Du kan bli forvirret av dette, fordi hva er en font hvis du ikke kan skrive brev til moren din!

Ikonskrifter brukes primært til å style nettsteder. Siden de er vektorbaserte, kan de endres, flyttes, styles og endres ved å bruke CSS 5 Babytrinn for å lære CSS og bli en Kick-Ass CSS trollmannCSS er de viktigste endringssidene som har sett det siste tiåret, og det banet vei for atskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer . Dette gir en enorm fordel i forhold til tradisjonelle designmetoder som bilder. Utseendet til et stort antall ikoner kan endres med bare noen få kodelinjer. Du trenger ikke å redigere 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 på mange andre fontpakker.

Her er start-HTML:

Dette er den minste mengden HTML som kreves for å produsere en webside. Jeg vil ikke forklare det meste, fordi vi har beskrevet det i vår guide om hvordan lage en nettside.

Den viktigste linjen er følgende:

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

Font Awesome ikoner er definert av CSS klasser lagt til Jeg tags. Disse ble valgt ettersom de ikke har noen nettleser eller standard definert styling knyttet til seg, så ikonene dine får ikke rot. Alternativt kan du legge klassene til span -koder, men det gjør ikke noe for HTML.

Her er den grunnleggende bruken. Legg dette inni din kropp tags:

 Mitt første ikon

Slik ser det ut:

Hvor lett var det? La oss bryte det ned. Det er to klasser som trengs for at Font Awesome skal fungere. Den første heter fa, som står for Font Awesome. Dette er nødvendig for alle ikoner, uavhengig av hvilket du bruker. Den andre klassen spesifiserer det spesielle ikonet du ønsker å bruke - dette kan være hva som helst, et fly, en person eller kredittkort. Dette er også prefiks med fa, og siden dette er et kugleikon, heter det fa-cog. Du kan se en liste over alle ikoner i Font Awesome på deres hjemmeside.

Prøv å endre ikonet fra tannhjulet til noe annet.

Gå dypere

Når du vet det grunnleggende, er det på tide med noen avanserte triks.

Hvis du ikke vil skrive din egen CSS, kan du bruke stilene som er innebygd i Font Awesome. Det er mange klasser du kan bruke for å gjøre ikoner større:

En annen nyttig klasse å bruke er fa-spin. Dette vil få deg til å rotere ikoner, og når du kombinerer det med de forrige størrelsesklassene, kan du gi noen fine effekter. Her er koden:

Her er resultatet:

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

Tallet på slutten definerer rotasjonsgradene 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 klasse lar deg kombinere to eller flere ikoner sammen. Her er koden:

Slik ser det ut:

Når du begynner å kombinere alle disse forskjellige klassene, er mulighetene virkelig uendelige.

Tilpasset CSS

Fordi ikonskrifter er bare kan du style dem med CSS akkurat som du ville gjort. Å bruke litt CSS3 kan gå langt:

Her er HTML for det ikonet:

Her er CSS:

@keyframes flytter {fra {margin-left: 0; } til {margin-left: 400px; } }. sykle {animasjonsnavn: flytte; animasjon-varighet: 4s; }

Denne CSS er ganske grunnleggende, men den har stor innvirkning. Dette er ikke en CSS-veiledning, så det kan være lurt å gjøre det lære CSS 10 enkle CSS-kodeeksempler du kan lære på 10 minutterVil du vite mer om bruk av CSS? Prøv disse grunnleggende CSS-kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider. Les mer hvis du vil vite mer om den indre virkemåten.

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

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

Her er CSS:

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

I likhet med forrige eksempel bruker dette CSS3-animasjoner. En animasjon som heter falme opprettes, og hvert personikon implementerer denne animasjonen med varierende timing. Det er mye potensiale å gå seg vill med disse ikonene og CSS3.

Det var alt for i dag. Du skal nå kunne bruke Icon-skrifter for å livne opp nettstedet ditt! Hvis du ikke er så sikker på ferdighetene dine ennå, sjekk ut disse CSS-malnettsteder 11 CSS-mal-nettsteder: Ikke start fra skraping!Det er tusenvis av gratis CSS-maler tilgjengelig på nettet, som alle omfavner moderne designtrender og -teknologier. Du kan bruke dem i sin opprinnelige form, eller tilpasse dem for å gjøre dem til din egen. Les mer , eller disse YouTube-kanaler for å komme i gang Vil du lære nettdesign? 7 YouTube-kanaler for å komme i gangYouTube har tusenvis av videoer og kanaler for nybegynnere med 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 favorittikonskrift? Gi oss beskjed i kommentarene nedenfor!