Ikon typsnitt är allt raseri just nu. De gör det så enkelt att bädda in vektorgrafik till en sida som designers överallt vänder sig till dem som det primära sättet att hantera ikoner.
Problemet är förstås, vi behöver mer kontroll över vilka ikoner vi bäddar in. Ibland drar vi från en mängd olika källor, inklusive vårt eget arbete, och vi behöver ett bra sätt att lägga allt ihop. Ange ikon typsnitt generatorer. Följ med när vi jämför ett par av våra favoriter.
Varför en generator?
Nackdelen med att använda en ikonstyp är att du är begränsad av ikonerna som råkar vara i den uppsättning som du hämtade. Om du vill inkludera tre olika ikoner från tre olika uppsättningar måste du ladda in tre olika teckensnitt, vilket faktiskt kan innebära att du laddar i hundratals ikoner som du helt enkelt inte behöver.
Självklart är det inte det bästa sättet att gå om inbäddning av ikoner om du går för en magert, meningsfull plats utan överflödiga resurser och onödiga laddningsskikt. Det här är där anpassade ikonfonter kommer in. I det här scenariot tar du dina tre ikoner, slänger dem i ett enda litet anpassat teckensnitt och lägger in det på din sida.
Tyvärr har vi inte alla kunskaper eller resurser för att bygga våra egna teckensnitt. Oroa dig inte, men dessa anpassade ikon typsnitt generatorer har du täckt. Oavsett om du vill använda egna ikoner eller utnyttja befintliga ikonuppsättningar, finns ett verktyg nedan för att få jobbet gjort.
Fontello
Den första generatorn som vi ska kolla är Fontello. Denna app är super slick, verkligen lätt att använda och har elva helt gratis ikonuppsättningar inklusive Font Awesome och Iconic. Det finns inte tusentals ikoner att välja mellan, men det är definitivt nog att du borde kunna hitta det du letar efter.
När du talar om att hitta det du letar efter, görs den uppgiften enkelt genom att uppdatera sökfunktionen högst upp på sidan. Jag älskar den levande filtreringen här, vilket är mycket bättre än att vänta på en ny sida som ska laddas med dina sökresultat.
Att välja ikoner för ditt anpassade teckensnitt är lika enkelt som att klicka på dem. När du har hittat och valt ikonerna som du vill inkludera, hoppa över till den andra fliken där du kan ändra namnen på varje ikon. Det är lite anpassningsalternativ som detta som gör Fontello så bra.
Nästa steg är att kolla in? Redigera koder? fliken så att du kan anpassa de tecken som är associerade med varje ikon. Att göra detta är lätt nog, använd bara de angivna fälten.
När du har genomfört stegen ovan är du redo att gå. Skriv bara in ett filnamn och klicka på länken för nedladdning för att få din anpassade typsnitt.
Ladda ner
Fontello-nedladdningen innehåller en hel del fjorton filer spridda över flera mappar. Fotavtrycket för varje fil är liten, men det stora antalet objekt du får kan verka överväldigande för någon som letade efter en enkel lösning. Med det sagt är det väldigt trevligt att ha ett fullt fungerande exempel för att fungera och de har gått igenom mycket för att se till att allt är så webbläsart kompatibelt som möjligt.
IcoMoon
Nästa app som vi ska titta på är IcoMoon. I all ärlighet är det mycket som Fontello, men det finns några viktiga skillnader som är värda att undersöka.
Precis som med Fontello kan du antingen bläddra igenom ikonerna genom att rulla eller använda den integrerade sökfunktionen för att hitta något specifikt.
Det finns många fler ikoner som du ser som standard. För att kolla resten måste du slå på? Biblioteket? knappen nära toppen av skärmen.
Detta tar dig till en sida som för närvarande har sexton olika samlingar att välja mellan, varav många är gratis medan andra måste köpas.
Importera andra resurser
En av de bästa funktionerna i IcoMoon är möjligheten att importera andra resurser som ingår i din anpassade byggnad. Du kan ladda upp andra ikonfonter eller ens egna SVG-grafik. Detta gör IcoMoon till en fantastisk resurs för alla som vill bygga sin egen ikon font från början.
Generera teckensnittet
När du väl har tagit ut dina ikoner kan du gå vidare till din typsnittshämtning via knappen längst ner på sidan. Observera också att du har möjlighet att ladda ner ikonerna som en bild (det kommer att generera en sprite-sida).
Precis som hos Fontello, innan du hämtar, får du några alternativ för att ändra inställningar och kodning för din typsnitt.
Ladda ner
Nedladdningen här är betydligt mindre än hos Fontello. Det finns bara nio filer, varav fem är själva fonten. I grund och botten ger Fontello dig en massa CSS-filer medan IcoMoon kondenserar den till en. Detta gör allt mycket lättare att siktas igenom och demoversidan är också lite snyggare.
Pictonic
Nästa på vår lista är Pictonic. För att använda den här sidan måste du registrera dig för ett konto. Därifrån får du tre alternativ. Du kan använda de fria ikonerna, använda betalda ikoner med en ränta på $ 0,59 per ikon eller få obegränsad tillgång till $ 199.
Här ser vi samma borr som tidigare, använd direktsökningsfunktionen eller bläddra igenom tillgängliga ikoner genom att rulla och klicka på de som du vill ha.
Det finns också en rullgardinsmeny som låter dig enkelt filtrera resultaten efter kategori. Det här är också ett bra sätt att ta en titt på 320 gratis ikoner (som för det mesta är sociala och programvaro logotyper).
Ladda ner
Den här gången ser jag inte riktigt några alternativ för att anpassa din nedladdning, du klickar helt enkelt på? Fortsätt? då? ladda ner? och du får det som visar sig vara vår största nedladdning än.
Med Pictonic får du automatiskt filerna i stort sett alla sätt du kan önska dem: fontfiler, PNG och SVG. Antalet filer du får beror på antalet ikoner du valt.Jag älskar att jag har alla dessa alternativ, men jag skulle vilja välja vad jag gör och vill inte ha för nedladdningen.
Pictos Server
Jag räddade outlier för sist. Pictos Server handlar om saker ganska annorlunda än de andra sidorna. Istället för att skapa en anpassad typsnitt som du laddar ner och bäddar in på din egen server, är Pictos värd för ikonerna för dig. Det är allmänt känt som "Typekit av ikoner", vilket är en anständig beskrivning av vad du kan förvänta dig av tjänsten.
Enligt min räkning finns det för närvarande cirka 338 ikoner att välja mellan. Du kan smala ner erbjudandet genom att välja från en av Pictos-uppsättningarna eller söka efter något specifikt.
När du väl valt ikonerna kan du skriva in de tecken som du vill representera varje ikon. Härifrån klickar du helt enkelt på? Generera kod? knappen, som ger dig en CSS-inbäddslänk som du enkelt slänger in i din fil.
Prissättning
Eftersom Pictos är en värdtjänst är det uppenbarligen en månadsavgift som är inblandad. Priserna för planerna ställs in enligt sidvisningar, från och med 0 $ för upp till 25 000 månadsvisningar upp till $ 50 för upp till 4 000 000 månadsvisningar.
Det är också viktigt att notera att den fria planen verkar vara begränsad till tolv ikoner per typsnitt.
Hur jämför de?
Självklart är svaret på frågan om vilken webbplats som är bäst? beror på dina specifika behov. Varje webbplats verkar excel på sin egen väg. Om du letar efter den enklaste lösningen kan du inte slå Pictos Server. Det är väldigt lite arbete involverat och inbäddning av ikonens teckensnitt är en snap.
Om du letar efter massor av fria teckensnitt utan att behöva logga in för ett konto, kolla in Fontello. Det är en bra tjänst med massor av alternativ och är sannolikt att vara allt du behöver.
När det gäller funktioner och alternativ är IcoMoon svår att slå. Jag älskar att det låter dig ladda upp och integrera ditt eget arbete eller till och med andra ikonfonter som du har hittat. Det finns också massor av gratis ikoner här och även några premiumpaket om du verkligen vill gå ut.
Sammantaget var Pictonic förmodligen min minst favorit i gänget. Det fria ikonvalet var inte så bra och du har inte de anpassningsalternativ som de andra tjänsterna har. En sak som jag tycker om Pictonic är den enkla prissättningsmodellen för premiumikoner: $ 0,59 per ikon eller $ 199 för obegränsat tillträde. Trevligt och enkelt!
Vilken Icon Font Generator är din favorit?
Sammantaget är alla fyra av dessa tjänster värda att checka ut. De är alla väldigt lätta att använda och packade med värde.
Nu när du har sett mina tankar på dessa fyra typsnitt generatorer, lämna en kommentar nedan och berätta för mig dina tankar. Har du använt någon av dessa tjänster i tidigare projekt? Vilket rekommenderar du? Vilka andra alternativ finns där ute som jag saknade?