Ikon typsnitt är fantastiska för din webbplats Här är varför

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

Vad är ikonfonter?

Ikon typsnitt är exakt samma som “regelbunden” typsnitt - de definierar utseendet på en bit text. Den stora skillnaden här är att ikonens teckensnitt inte innehåller bokstäver och siffror, men symboler och ikoner. Du kan vara förvirrad av det här, eftersom det är bra att skriva ett brev om du inte kan skriva brev till din mamma!

Ikon typsnitt används främst för att stila webbplatser. Eftersom de är vektorbaserade kan de ändras, flyttas, formas och ändras med hjälp av CSS 5 Baby Steg till Learning CSS och bli en Kick-Ass CSS Sorcerer 5 Baby Steg för att lära CSS och bli en Kick-Ass CSS Sorcerer CSS är den Enstaka viktigaste förändringswebbsidor har sett under det senaste decenniet, och det banade vägen för separation av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer. Detta ger en stor fördel gentemot traditionella designmetoder som bilder. Utseendet och känslan hos ett stort antal ikoner kan ändras med bara några rader kod. Du behöver inte redigera några bilder, öppna Photoshop eller ladda upp de nya filerna - du skriver bara kod.

Komma igång

Jag använder Font Awesome för dessa exempel, men teorin kan tillämpas på många andra typsnittspaket.

Här är startprogrammet HTML:

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

Den viktigaste raden är följande:

Detta laddar upp Font Style Awesome Style Sheet från dess CDN. Utan denna linje skulle din webbplats inte veta vad Font Awesome är, så det är ganska viktigt. Det här stilarket hanterar allt det svåra arbetet med att bädda in webbfonter och gör det vanligtvis mycket lättare för dig.

Teckensnitt Fantastiska ikoner definieras av CSS-klasser som läggs till jag taggar. Dessa valdes eftersom de inte har någon webbläsare eller standarddefinierad styling kopplad till dem, så dina ikoner kommer inte att bli allt rörade. Alternativt kan du lägga till klasserna till spänna taggar, men det hämtar din HTML.

Här är den grundläggande användningen. Sätt det här inuti 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 som behövs för Font Awesome att arbeta. Den första kallas fa, vilket står för Font Awesome. Detta behövs för en ikon, oavsett vilken du använder. Den andra klassen specificerar den särskilda ikonen du vill använda - det kan vara allt, ett plan, en person eller ett kreditkort. Detta är också prefixat med fa, och eftersom det här är en cog-ikon, heter det fa-cog. Du kan se en lista över alla ikonerna i Font Awesome på deras hemsida.

Försök byta ikon från kuggan till någon annan.

Går djupare

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

Om du inte vill skriva din egen CSS kan du använda de stilar som byggdes direkt in 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 gör att ikonerna roterar, och i kombination med tidigare storleksklasser kan du producera några fina effekter. Här är koden:

Här är resultatet:

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

Antalet i slutet definierar rotationsgraderna för ikonen, men får inte bäras bort. Du är begränsad till 90, 180, eller 270.

Ett sista knep du kan göra är att stapla. De fa-stacken klassen kan du 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 teckensnitt, du kan stile dem med CSS precis som du skulle något annat element. Att använda en liten CSS3 kan gå långt:

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

Här är CSS:

@keyframes flytta från margin-left: 0;  till margin-left: 400px;  .bike animation-name: move; animeringstid: 4s; 

Denna CSS är ganska grundläggande, men den har stor inverkan. Det här är inte en CSS-handledning, men du kanske vill lära dig CSS. Nästa steg på vägen för att bli en CSS Jedi-mästare Nästa steg på vägen för att bli en CSS Jedi-mästare CSS är absolut en av de viktigaste teknologierna runt på Internet idag, och medan de flesta erkänner att vi vet lite HTML, är vi vanligtvis inte clueless om CSS. Förra gången jag introducerade dig ... Läs mer om du vill veta mer om de inre arbeten.

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

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

Här är CSS:

@keyframes blekna från opacity: 0;  till opacitet: 1;  .person opacitet: 0; animationsnamn: blekna;  # p1 färg: röd; animeringstid: 2s;  # p2 färg: orange; animeringstid: 4s;  # p3 färg: grön; animeringstid: 6s;  # p4 animation-duration: 8s; 

Precis som i föregående exempel använder CSS3 animeringar. En animering som heter blekna skapas, och varje personsymbol 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 ikonfonter för att liva upp din webbplats! Om du inte är så säker på dina färdigheter ännu, kolla in dessa CSS-mallplatser 11 CSS Template Sites: Börja inte från början! 11 CSS Template Sites: Börja inte från början! Det finns tusentals gratis CSS-mallar tillgängliga online, alla omfatta moderna designtrender och -teknik. Du kan använda dem i sin ursprungliga form, eller anpassa dem för att göra dem egna. 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 få dig igång Vill du lära dig webbdesign? 7 YouTube-kanaler för att få dig igång YouTube har tusentals videoklipp 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 något nytt idag? Vad är din favorit ikonfon? Låt oss veta i kommentarerna nedan!

Utforska mer om: CSS, HTML, webbdesign.