Ikonskrifttyper er fantastisk til dit websted: Her er hvorfor

Reklame

Du har hørt om ikoner, og du har næsten helt sikkert hørt om skrifttyper, men hvad er en Ikon Skrifttype? I dag viser jeg dig, hvad ikonskrifttyper er, og hvordan du kan bruge dem til at genoplive dit websted. Lad os komme igang.

Hvad er ikonskrifter?

Ikonskrifttyper er nøjagtigt de samme som "almindelige" skrifttyper - de definerer udseendet og følelsen af ​​et stykke tekst. Den store forskel her er, at ikonskrifter ikke indeholder bogstaver og tal, men symboler og ikoner. Du kan blive forvirret over dette, da hvad godt er en skrifttype, hvis du ikke kan skrive breve til din mor!

Ikonskrifter bruges primært til at style websteder. Da de er vektorbaserede, kan de ændres, flyttes, styles og ændres ved hjælp af CSS 5 babytrin til at lære CSS og blive en kick-ass CSS troldmandCSS er de mest vigtige ændringer, som websider har set i det sidste årti, og det banede vejen for adskillelse af stil og indhold. På den moderne måde definerer XHTML den semantiske struktur ... Læs mere . Dette giver en enorm fordel i forhold til traditionelle designmetoder, såsom billeder. Udseendet og følelsen af ​​et stort antal ikoner kan ændres med blot et par kodelinjer. Du behøver ikke at redigere nogen billeder, åbne Photoshop eller uploade de nye filer - du skriver bare kode.

Kom godt i gang

Jeg bruger det Font Awesome for disse eksempler, men teorien kan anvendes til mange andre fontpakker.

Her er start-HTML:

Dette er den mindste mængde HTML, der kræves for at producere en webside. Jeg forklarer ikke størstedelen af ​​det, da vi har beskrevet det i vores guide til hvordan man laver et websted.

Den vigtigste linje er følgende:

Dette indlæser Font Awesome-stilarket fra dets CDN. Uden denne linje ville dit websted ikke vide, hvad Font Awesome er, så det er ganske vigtigt. Dette typografiark håndterer alt det hårde arbejde med indlejring af webskrifttyper og gør det generelt meget lettere for dig.

Font Awesome ikoner defineres af CSS klasser tilføjet jeg tags. Disse blev valgt, da de ikke har nogen browser eller standarddefineret styling knyttet til dem, så dine ikoner får ikke alt sammen rod. Alternativt kan du tilføje klasserne til span tags, men det rod din HTML.

Her er den grundlæggende anvendelse. Læg dette inde i din legeme tags:

 Mit første ikon

Sådan ser det ud:

Hvor let var det? Lad os nedbryde det. Der er to klasser, der kræves for at Font Awesome kan arbejde. Den første kaldes fa, der står for Font Awesome. Dette er nødvendigt for ethvert ikon, uanset hvilket du bruger. Den anden klasse specificerer det bestemte ikon, du vil bruge - dette kan være alt, et fly, en person eller kreditkort. Dette er også præfixeret med fa, og da dette er et tandhjulikon, hedder det navnet fa-cog. Du kan se en liste over alle ikoner i Font Awesome på deres hjemmeside.

Prøv at ændre ikonet fra tandhjulet til enhver anden.

Gå dybere

Når du kender det grundlæggende, er det tid til nogle avancerede tricks.

Hvis du ikke ønsker at skrive din egen CSS, kan du bruge de typografier, der er indbygget lige i Font Awesome. Der er mange klasser, du kan bruge til at gøre ikoner større:

En anden nyttig klasse at bruge er fa-spin-. Dette får dig til at rotere ikoner, og når du kombinerer med de foregående størrelsesklasser, kan du producere nogle dejlige effekter. Her er koden:

Her er resultatet:

Det er let at rotere ikoner - brug fa-rotere klasse:

Tallet i slutningen definerer rotationsgraderne for ikonet, men bliver ikke båret med. Du er begrænset til 90, 180, eller 270.

Et sidste trick, du kan gøre, er at stable. Det fa-stack klasse giver dig mulighed for at kombinere to eller flere ikoner sammen. Her er koden:

Sådan ser det ud:

Når du begynder at kombinere alle disse forskellige klasser, er mulighederne virkelig uendelige.

Tilpasset CSS

Fordi ikonskrifter er lige skrifttyper, kan du style dem med CSS, ligesom du ville gøre noget andet element. Brug af lidt CSS3 kan gå langt:

Her er HTML for det ikon:

Her er CSS:

@keyframes flytter {fra {margin-left: 0; } til {margin-left: 400px; } } .cykel {animations-navn: flyt; animationsvarighed: 4s; }

Denne CSS er ganske grundlæggende, men den har stor indflydelse. Dette er dog ikke en CSS-tutorial, så det kan du måske gerne lær CSS 10 enkle CSS-kodeeksempler, du kan lære på 10 minutterVil du vide mere om brug af CSS? Prøv disse grundlæggende CSS-kodeeksempler til at begynde med, og anvend dem derefter på dine egne websider. Læs mere hvis du vil vide mere om den indre funktion.

Du kan gøre nogle specielle ting, hvis du virkelig vil:

Dette klapper lidt for at reducere filstørrelsen til internettet. Her er HTML:

Her er CSS:

@keyframes forsvinder {fra {opacity: 0; } til {uklarhed: 1; } } .person {opacity: 0; animations-navn: fade; } # p1 {farve: rød; animationsvarighed: 2s; } # p2 {farve: orange; animationsvarighed: 4s; } # p3 {farve: grøn; animationsvarighed: 6s; } # p4 {animation-varighed: 8s; }

Som det foregående eksempel bruger dette CSS3-animationer. En animation kaldet falme oprettes, og hvert personikon implementerer denne animation med varierende timing. Der er meget potentiale til at gå vild med disse ikoner og CSS3.

Det er alt for i dag. Du skal nu kunne bruge ikonskrifttyper til at genoplive dit websted! Hvis du endnu ikke er så sikker på dine evner, så tjek disse CSS-skabelonwebsteder 11 CSS-skabelonsider: Start ikke fra skrabe!Der er tusinder af gratis CSS-skabeloner tilgængelige online, som alle omfavner moderne designstendenser og teknologier. Du kan bruge dem i deres originale form eller tilpasse dem til at gøre dem til din egen. Læs mere eller disse YouTube-kanaler for at komme i gang Vil du lære webdesign? 7 YouTube-kanaler for at komme i gangYouTube har tusinder af videoer og kanaler til begyndere af webdesign. Her ser vi på nogle af de bedste til at komme i gang. Læs mere med webdesign.

Lærede du noget nyt i dag? Hvad er din foretrukne ikonskrifttype? Fortæl os det i kommentarerne nedenfor!