Ikon typsnitt är otroligt användbar när du utformar en webbplats, och har ett stort antal fördelar jämfört med vanliga ikoner.

Eftersom de levereras som en typsnittfil och inbäddad som ett teckensnitt, är dessa ikoner lätt skalbara, deras färg kan ändras live, snarare än att behöva redigera bilder. tillsammans med det kan olika effekter läggas till genom kodning, såsom skuggor, strokeeffekter eller gradienter, vilket gör dem mycket mer mångsidiga än bilder.

Här kommer vi att avrunda några av de bästa ikonens teckensnitt världen över har att erbjuda, för att du ska kunna använda på dina webbplatser.

Fico

Fico är en fantastisk utseende, presenterad på en vacker webbplats, vilket gör det glädjande att ladda ner och använda. Webbplatsen visar tydligt vilken bokstav eller glyph som används för varje ikon, vilket tar bort den ibland smärtsamma processen att ladda ner en ikonfontsnitt bara för att du inte har någon aning om var man hittar varje ikon på tangentbordet och spenderar dyrbar cykeltid genom varje nyckel. Dessa ikoner ser fantastiska ut i samband med Helvetica, de rena smarta linjerna arbetar tillsammans tematiskt för att Fico skapades för sans serif typsnitt. Ytterligare exempel kan ses på deras webbplats.

pixelated

pixelated är en typsnitt som trots sin charm har en praktisk användning. Pixelated är extremt lätt, ikon filstorlekar genomsnitt ca 60 byte! Inte megabyte, eller till och med kilobytes, byte! Du kan också hämta dem som transparenta GIF, så kompatibla ner till IE6, och om du vill redigera dem kan du ladda ner en PSD. Teckensnittet kommer med två färgscheman, som visas nedan, vilket gör att du använder dem ännu enklare. Det är helt gratis och finns tillgängligt för kommersiell användning!

Entypo

Överraskande för ett teckensnitt med 100 + ikoner, Entypo kommer helt gratis, och som Pixelated, är tillgänglig för kommersiell användning. Den kan laddas ner som en vektorfil för redigering tillsammans med OpenType-fontfilen. Den här teckensnittet påminner mycket om Apple-gränssnittsikonen, som används i iOS5 och OSX10, och som en fin touch, doneras 50% av donationer gjorda på typsnittets webbplats till Wikipedia.

Uicons

Förutom det ganska kvickt namn, Uicons erbjuda 391 ikoner i deras uppsättning, och inkluderar sociala nätverksspecifika ikoner som ofta är mycket missade i ikon typsnitt. Inte överraskande är den här uppsättningen inte fri, men för en relativt billig $ 20 är alla efterföljande uppdateringar av teckensnittet gratis. Dessa ikoner är utformade för att vara oändligt skalbara, vilket gör responsiv design, från 1080p stationära skärmar ner till mobila enheter som iPhone, mycket enklare. Den kan laddas ned i flera format, men inte som ett teckensnitt för tillfället, det finns med i listan eftersom stöd väntar och det förtjänar en plats här.

iconic

iconic är en ikonuppsättning med öppen källkod som består av 171 ikoner i olika format, inklusive som ett teckensnitt. Den är utformad för skalbar, "syftar till att vara den mest framåtriktade ikonen som baseras på dess stöd för framåtriktad visning / distribueringsmetoder. Ikoner ska inte bara vara tydliga och attraktiva, de borde vara enkla och flexibla för att arbeta med ". Den här typen av öppen källkod betyder att den har blivit tillförd när det behövs ikoner, snarare än planerat som en uppsättning från början, vilket leder till några ganska intressanta och mindre än konventionella ikoner som ingår i uppsättningen.

Sanscons

Detta är en anpassning av en annan typsnitt, Bitcons , en uppsättning med 120 ikoner i 10 olika färger och olika storlekar. Sanscons syftar till att göra Bitcons mer CSS vänliga, med genomskinliga bakgrunder och 13 färger. Ikonerna kommer också i 16 × 16, 32 × 32 och 64 × 64 pixlar samt beskurna i storlek. 32 × 32 och 64 × 64 ikonen har en chunkier look, behåller pixel stilen. Satsen är fri under Creative Commons-licensen.

Heydings

Heydings är ett teckensnitt som skapats av det frustrerande underskottet av högkvalitativa, fria ikonwebbskrifter tillgängliga för inbäddning ", i skaparens ord. Den innehåller 60 Glyphs, och webbplatsen erbjuder även CSS för att göra din kodning med teckensnitt lättare. Författaren har också kartlagrat ikonerna alfabetiskt för att göra det enklare att använda. Dessa är utformade för att användas som en del av kärnanvändargränssnittet på din webbplats, och så omfattar glyphs ett brett spektrum för en mängd olika webbplatser.

Bara vektor

Denna ikonuppsättning åtföljs av en omfattande webbplats som täcker alla aspekter av Bara vektor , från hur det görs i webbläsaren till hur det skulle se ut på en formaterad webbplats, i olika storlekar, tillsammans med kod för att göra @ fontface'ing enklare. Det innehåller även en praktisk felsökningsguide som gäller för alla webbfonter, som omfattar laddning i olika webbläsare, inklusive mobila enheter. Webbplatsen visar fontens skalbarhet och visar storlekar mycket större än många ikonfonter stör att stödja.

Flexi sociala ikoner

Flexi finns tillgänglig på myfonts.com, vilket med fördel erbjuder en sida som visar typsnittets rendering på flera webbläsare. Teckensnittet har 68 glyfer, och kostar $ 29, och liksom webfont ger OpenType OTF och TrueType-alternativ för mångsidighet.

WriteSocial

Writesocial endast har de 18 ikonerna som visas nedan, men $ 10 är motiverat i varianterna i vilka de kan komma, med sådana alternativ som kvadratiska eller cirkelikoner. Den levereras med ett Open Type Format, samt licensieras för användning med @ font-face. Vid köp får du en HTML-fil med flera exempel på font-ansiktsexempel på teckensnittet. Utöver detta kan du välja att betala $ 15 för teckensnittet istället för standard $ 10, där $ 10 av $ 15 går till Charity: Water.

ikoo

ikoo är ett typsnitt som är speciellt utvecklat för att integreras i en HTML-sida utan att använda bilder via @FontFace eller på andra sätt. Det är inriktat på sidnavigering och erbjuder ett antal riktigt rena ikoner i både vita och svarta varianter, med totalt 65 gratis ikoner.

InfoBits (Ikoner och Dingbats)

Detta ger dig två uppsättningar till priset av en, bara 29 kronor för 190 tecken, InfoBits har två separata ikoner fonter, som visas nedan, som också är tillgängliga individuellt för $ 19 vardera. Tecknen har en lekfull, men traditionell stil, med ett stort antal användningar och alternativ, vilket är enormt mångsidigt för både sidnavigering och andra perifera användningar.

Pictos

Pictos är en ikonuppsättning tillgänglig i ett sinneblåsande antal format, och webbplatsen har ett inbyggt nyckelbinder för att anpassa ditt eget Pictos-teckensnitt. Den innehåller 650 ikoner, och anses vara tillräckligt bra för att användas över hela webben, bland webbplatser som Microsoft, Adobe och BitTorrent. Med den anpassade teckensnittfunktionen används den direkt från Pictos-servrarna och kräver sålunda en skalbar abonnemang efter en 10-dagars gratis provperiod. Det är ett otroligt attraktivt teckensnitt, och det är lätt att se varför det används av så många välrenommerade webbplatser.

Typsnitt Awesome

Detta font är utformad för att användas med Twitter: s Bootstrap CSS-ram, inklusive 220 ikoner, vilket ger exempel på att ikonerna används i Bootstrap-gränssnittet på deras webbplats. De ges också som vektorikoner för enkel redigering, och den nya 2.0-versionen stöder IE7, för maximal kompatibilitet.

Vad hittar du den mest användbara ikonen, en kundvagn, en twitter ikon? Missade vi en av dina favorituppsättningar? Låt oss veta i kommentarerna.