Ikon typsnitt är fantastisk för din webbplats: här är varför

Annons

Du har hört talas om ikoner, och du har nästan säkert hört tal om teckensnitt, men vad är en Ikon typsnitt? Idag kommer jag att visa dig vad ikonsteckensnitt är och hur du kan använda dem för att liva upp din webbplats. Låt oss börja.

Vad är ikon typsnitt?

Ikon typsnitt är exakt samma som "vanliga" typsnitt - de definierar utseendet och känslan av en textbit. Den stora skillnaden här är att ikonteckensnitt inte innehåller bokstäver och siffror, utan symboler och ikoner. Du kan bli förvirrad av det här, eftersom det är bra för ett teckensnitt om du inte kan skriva brev till din mamma!

Ikon typsnitt används främst för att utforma webbplatser. Eftersom de är vektorbaserade kan de ändra storlek, flytta, utforma och ändra med CSS 5 Babysteg för att lära sig CSS och bli en kick-ass CSS trollkarlCSS är de enskilt viktigaste förändringswebbsidor som har sett under det senaste decenniet, och det banade vägen för separationen av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer

. Detta ger en stor fördel jämfört med traditionella designmetoder som bilder. Utseendet och känslan hos ett stort antal ikoner kan ändras med bara några få kodrader. Du behöver inte redigera några bilder, öppna Photoshop eller ladda upp de nya filerna - du skriver bara kod.

Komma igång

Jag kommer att använda Font Awesome för dessa exempel, men teorin kan tillämpas på många andra fontpaket.

Här är start-HTML:

Detta är den minsta mängden HTML som krävs för att producera en webbsida. Jag förklarar inte majoriteten av det, eftersom vi har behandlat det i vår guide om hur man gör en webbplats.

Den viktigaste raden är följande:

Detta laddar Font Awesome-formatmallen från dess CDN. Utan den här linjen skulle din webbplats inte veta vad Font Awesome är, så det är ganska viktigt. Det här formatmallen hanterar allt hårt arbete med att bädda in webbteckensnitt och gör i allmänhet saker mycket enklare för dig.

Font Awesome-ikoner definieras av CSS-klasser som läggs till jag taggar. Dessa har valts eftersom de inte har någon webbläsare eller standarddefinierad styling kopplad till dem, så dina ikoner kommer inte att röra sig. Alternativt kan du lägga till klasserna till spänna taggar, men det rör sig om din HTML.

Här är den grundläggande användningen. Lägg detta in i din kropp tags:

 Min första ikon

Så här ser det ut:

Hur lätt var det? Låt oss bryta ner det. Det finns två klasser för att Font Awesome ska fungera. Den första heter fa, som står för Font Awesome. Detta behövs för alla ikoner, oavsett vilken du använder. Den andra klassen anger den specifika ikon du vill använda - det kan vara vad som helst, ett plan, en person eller kreditkort. Detta är också prefixat med fa, och eftersom det här är en kugghjulikon är namnet fa-cog. Du kan se en lista över alla ikoner i Font Awesome på deras webbplats.

Försök ändra ikonen från kuggen till någon annan.

Gå djupare

När du väl vet grunderna är det dags för några avancerade trick.

Om du inte vill skriva din egen CSS kan du använda formatmallarna inbyggda i Font Awesome. Det finns många klasser du kan använda för att göra ikoner större:

En annan användbar klass att använda är fa-spin. Detta kommer att få ikoner att rotera, och i kombination med föregående storleksklasser kan du skapa några fina effekter. Här är koden:

Här är resultatet:

Det är lätt att rotera ikoner - använd fa-rotera klass:

Siffran i slutet definierar graden av rotation för ikonen, men släpps inte bort. Du är begränsad till 90, 180, eller 270.

Ett sista trick du kan göra är att stapla. De fa-stacken klass låter dig kombinera två eller flera ikoner tillsammans. Här är koden:

Så här ser det ut:

När du börjar kombinera alla dessa olika klasser är möjligheterna verkligen oändliga.

Anpassad CSS

Eftersom ikon typsnitt är bara typsnitt, kan du utforma dem med CSS precis som du skulle göra något annat element. Att använda lite CSS3 kan gå långt:

Här är HTML för den ikonen:

Här är CSS:

@keyframes flyttar {från {margin-left: 0; } till {margin-left: 400px; } } .cykel {animationsnamn: flytta; animation-varaktighet: 4s; }

Denna CSS är ganska grundläggande, men den har stor inverkan. Det här är dock inte en CSS-handledning, så du kanske vill lära sig CSS 10 enkla CSS-kodexempel du kan lära dig om 10 minuterVill du veta mer om hur du använder CSS? Prova dessa grundläggande CSS-kodexempel till att börja med och applicera dem sedan på dina egna webbsidor. Läs mer om du vill veta mer om den inre funktionen.

Du kan göra några speciella saker om du verkligen vill:

Detta stammar lite för att minska filstorleken för webben. Här är HTML:

Här är CSS:

@keyframes bleknar {från {opacity: 0; } till {opacity: 1; } } .person {opacity: 0; animationsnamn: fade; } # p1 {färg: röd; animationstid: 2s; } # p2 {färg: orange; animation-varaktighet: 4s; } # p3 {färg: grön; animation-varaktighet: 6s; } # p4 {animation-varaktighet: 8s; }

Liksom föregående exempel använder detta CSS3-animationer. En animation som heter blekna skapas, och varje personikon implementerar denna animering med varierande tidpunkt. Det finns mycket potential att gå vild med dessa ikoner och CSS3.

Det är allt för idag. Du borde nu kunna använda Ikon-teckensnitt för att liva upp din webbplats! Om du inte är så säker på dina färdigheter ännu, kolla in dessa CSS-mallsidor 11 CSS-mallsidor: Börja inte från skrapa!Det finns tusentals gratis CSS-mallar tillgängliga online, alla omfattar moderna designtrender och teknologier. Du kan använda dem i sin ursprungliga form, eller anpassa dem för att göra dem till din egen. Läs mer eller dessa YouTube-kanaler för att komma igång Vill du lära dig webbdesign? 7 YouTube-kanaler för att komma igångYouTube har tusentals videor och kanaler för nybörjare av webbdesign. Här tittar vi på några av de bästa för att komma igång. Läs mer med webbdesign.

Lärde du dig något nytt idag? Vad är ditt favoritikonteckensnitt? Låt oss veta i kommentarerna nedan!