Använda Genericons typsnitt på din webbplats

Jag tror att ikon typsnitt är en av de största idéerna någonsin född i den gyllene tiden av webbdesign. Några bra killar på Automattic känner förmodligen samma sätt, eftersom de bestämde sig för att komma fram till en bra ikonstyp med namnet Genericons. I den här artikeln kommer vi att lära oss hur fantastiska ikon typsnitt är och hur man använder sig av genericons typsnitt.

Betydelsen av ikonfonter

Som jag sa lever vi i den gyllene tiden av webbdesign. Ny teknik föds varje dag och webbläsare adopterar dem snabbt. Förutom den nya tekniken finns det nya designtekniker som kommer fram över hela världen.

I den här gyllene eran är responsiv webbdesign förmodligen en av de mest populära koncepten. I en värld full av olika enheter som ansluter till Internet som bärbara datorer, surfplattor och smartphones, formar vi våra mönster enligt enhetens dimensioner och pixeldensiteter. Som webbdesigners har det blivit en daglig vana att flytta element och skala grafik för att göra vårt designarbete i en mängd olika enheter, från 27-tums Apple-skärmar till Kindles.

Det är där ikon typsnitt kommer till nytta.

Fördelar med att använda ikonfonter

Som en present från lyhörd webbdesign används ikonfonter för att erbjuda ett optimerat och skalbart grafikpaket till besökare på vilken enhet som helst. Dessutom kan deras kompatibilitet med korsbrowser få dem att fungera även på gamla webbläsare, så våra morföräldrar och folk på DMV kan också njuta av skarpa, helt nya ikoner!

Skämt åt sidan, här är de viktigaste fördelarna som du kan dra nytta av med en ikon typsnitt:

Ikon typsnitt är skalbar. Det betyder att oavsett hur stor din ikon får, behöver du inte kompromissa med bildkvalitet eller filstorlek.
Ikonfonter kan förbättras med enkla rader av CSS. Du behöver inte öppna din stora ol bildredigerare för att ändra sina färger eller lägga till skuggor till dem. Genomskinlighet? Kontrollera. CSS-gradienter? Kontrollera. 3D-rotation? Kontrollera. Du får idén. Med några rader av CSS-kod kan du göra nästan allt som du kan göra med din text. När allt kommer omkring är dessa ikoner tekniskt bitar av text.
Ikon typsnitt har fantastisk webbläsare support. Eftersom de är typsnitt och även Internet Explorer 7 stöder typsnitt, behöver du inte oroa dig för om de kommer att misslyckas att visas på äldre webbläsare.
Ikon typsnitt är små i filstorlek. Det här kan låta som ett kontroversiellt argument (eftersom ett paket med PNG-ikoner kan vara nästan lika litet som ikon typsnitt), men du kan se att WOFF-formatet av Genericons, till exempel, är bara 11 KB i filstorlek. Dessutom måste du inkludera saker som my-icon-2x.png om du behöver större bilder. Ikonfonter gör också bara en HTTP-begäran.

Chris Coyier har en demoversida för ikon typsnitt där han anger några av fördelarna med ikon typsnitt och låter dig prova dem.

Genericons-ikonuppsättningen, per december 2013

Använda Genericons

Genericons är ett ganska bra ikon typsnitt skapat av Automattic, också grundarna till WordPress. Teckensnittet innehåller 121 ikoner i slutet av 2013, och det växer varje gång i taget. Det är också licensierat med GPL, så vi kan använda denna söta ikonpaket i alla våra open source-projekt med kompatibla licenser.

Om du inte använder en ikonstyp på din WordPress-webbplats kan det nu vara dags att inkludera Genericons!

Inklusive det i din tema

Om du vill använda denna typsnitt i ditt tema finns det bara några enkla steg att följa:

Hämta Genericons genom att klicka på jätten Ladda ner knappen på hemsidan.
Ladda upp font mapp i ditt temas rotmapp. Om du vill kan du byta namn på mappen och lägga den in i en annan mapp.
Kopiera innehållet i genericons.css filen till ditt tema style.css fil. (Om du ändrade namnet och sökvägen för typsnittskorgen, glöm inte att göra ändringar i CSS för att fixa sökvägen för fontfilerna.)

Det är det, ditt tema är nu 100% Genericons kompatibelt! Du kan nu använda ikonerna i HTML-elementen så här:

 Den här länken har tablettikonen!

Om du vill använda en ikon som ett separat element måste du använda HTML-element, så här:

Den här länken har också tablettikonen!

Observera att du måste använda två CSS-klasser: genericon och genericon- icon-namn. Jag kommer inte att klistra in ikonerna i den här artikeln (eftersom nya ikoner läggs till typsnittet regelbundet) men du kan se en kategoriserad lista med ikonnamn inuti genericons.css fil. Alternativt kan du kontrollera genericons.com och klicka på varje ikon för att se det relevanta namnet.

Använda den med Genericon'd Plugin

Om du inte vill integrera teckensnittet i ditt tema och använda ikonpaketet med ett separat plugin istället, kan du använda Genericon'd-plugin på wordpress.org.

Användningen är nästan densamma - du behöver bara lägga till en annan klass som heter genericond:

Den här länken har tablettikonen! Den här länken har också tablettikonen!

Alternativt kan du använda en kortnummer:

[generikonikon = tablett] Den här länken har även tablettikonen!

Observera att du bara behöver använda ikonnamnet den här gången.

Slutsats

Ikon typsnitt är populära av flera anledningar: deras skalbarhet, användarvänlighet och bakåtkompatibilitet. Med en liten fil kan varje webbdesigner och utvecklare dra nytta av denna fantastiska lilla tekniken.

Vad tycker du om Genericons? Dela dina kommentarer med oss nedan! Och om du gillade artikeln delar du den för att låta dina vänner veta om Genericons också!

Koda