Så här byter du dina ikoner till en webbtyp
Jag hade skapat några snygga ikoner för en webbdesign, jag gjorde, och jag förhandsgranska den nya sajten på en gammal iPad. Layouten såg OK i normal storlek, men inzoomade på en del av sidan såg jag plötsligt att min ikon var en suddig röra, medan den textbaserade rubriken fortfarande var skarp och skarp. På en nyare Retina-display iPad såg inte ikonerna ganska skarpa, även vid normal storlek.
Den första tanken jag hade var att skapa dubbla sprite-bilder, så att de skulle visas med halva storleken med CSS. Medan detta fick dem att se bättre ut på en näthinnans skärm i normal storlek, så snart du började klämma och zooma, återvände blurrinessen. Men texten var fortfarande så skarp och skarp.
Svaret var uppenbart. Jag behövde vända mina ikoner till ett teckensnitt.
I denna handledning tittar vi på hur man gör vektorikoner till ett webbfont med hjälp av en bra gratis webbapp som heter IcoMoon. Sedan tittar vi på hur man använder de genererade typsnittsfilerna och CSS på en webbsida.
Fördelarna med att använda en ikon typsnitt
Ett ikonfont har flera fördelar jämfört med bitmappsbilder, förutom bildskärpa.
- Lämplighet: En ikonstyp kommer att vara mycket mindre i filstorlek än en serie bilder, speciellt om du har använt dubbla bilder för näthinnan. Och när teckensnittet har laddats kommer dina ikoner att göra omedelbart, utan att du behöver ladda ner en bild.
- Skalbarhet: En ikonstyp kan ställas in till vilken storlek som helst genom att ställa in
font-sizeegendom i den medföljande CSS. Detta gör att du kan experimentera med olika storlekar; medan för bitmappsbilder skulle du behöva skriva ut en bildfil i varje storlek. - Flexibilitet: Texteffekter kan enkelt appliceras på din ikon, inklusive färger, drop shadows och rollover states. De kommer också att visa bra mot någon färg eller bildbakgrund.
- Kompatibilitet: webbfonter stöds av alla moderna webbläsare och äldre webbläsare, även IE 6 och tidigare.
Så, låt oss börja!
Skapa en ikon typsnitt
Symbolfonter kan byggas med hjälp av en dedikerad typsnittskapande app, till exempel glyfer , men ett professionellt typografiverktyg ligger långt utöver behoven eller kraven för att bygga ett enkelt ikonfont, där förhållandet mellan karaktärer (dvs. korsning och ligaturer) inte är viktigt.
Det allra enklaste sättet är att använda en bra gratis online app som heter IcoMoon , av Keyamoon, som tar bort allt krångel med att konvertera symboler till en webbfont.
Den här HTML5-appen tar bort all smärta när det gäller att skapa teckensnittfiler för enkla användningsområden, till exempel byggnadsikonfonter. IcoMoon levereras med ett antal ikonuppsättningar som redan är laddade, och du kan lägga till mer i ditt bibliotek, varav de flesta kan användas gratis (kontrollera licenseringen). Om du letar efter ganska vanliga ikoner, till exempel "filhämtning" och "kundvagn", så kanske du upptäcker att det är lämpligt att använda en av dessa för att skapa din egen.
Steg för steg
1. Förbered dina illustrationer
Till att börja med måste du skapa ikonerna i ett vektorritningsprogram som kan exportera till SVG-format, till exempel Illustrator eller Inkscape.
Medan du designar kan du arbeta med vilka färger du vill, men ikonerna måste vara en fast färg. Se till att varje ikon är ungefär lika stor. Att ha en ikon mycket längre eller längre än en annan gör det svårt att bygga en konsekvent typsnitt. Här måste jag minska bredden på min luftskeppsikon så att den matchar de andra.
2. Rengöring
Kontrollera varje ikon noggrant för att försäkra dig om att det inte finns några felaktigheter - detaljer som ser OK ut i mindre storlekar kan dölja små defekter när de zoomas in. I ikonen som visas nedan måste jag ta bort de skurna stegen som har krypt in när lagringselementen är inslagna.
I Illustrator använder du Pathfinder-verktyget för att förena överlappande element och elementet Minus Front för att ta bort utklippselement, till exempel stjärnan i dessa ikoner.
Huvudprincipen är att se till att din ikon är läsbar i små vågar. Förenkla så mycket som möjligt.
3. Exportera till SVG
Välj nu en ikon och kopiera och klistra in den i ett nytt kvadratiskt dokument (till exempel 200 × 200 pixlar). Skala ikonen så att den passar. Du kan tycka att det är användbart att ställa in en baslinjelinje. Färg ikonen så att den är solid svart på en vit bakgrund.
Välj nu File… Save as och spara filen som en SVG-fil. Använd standard SVG-inställningar. När du har gjort det här för alla ikoner är du redo att skapa ett webbfont.
4. Importera till IcoMoon
Öppna IcoMoon webbapp . För att importera en ikon klickar du på knappen "Importera ikoner" och väljer sedan SVG-filerna du vill lägga till. Du kan lägga till flera filer samtidigt. Dessa kommer då att visas under "Din anpassade ikoner". Om de är markerade i gult kommer de att vara en del av den ikonstyp du ska skapa. I det här exemplet kan du se att jag har bestämt mig för att inte exportera en av mina egna ikoner, och jag har lagt till en av ikonerna från "Mini-ikoner".
5. Exportera teckensnitt från IcoMoon
Du kan klicka på knappen "Redigera" om du vill justera ikonens position, dimensionering eller rotation. Använd "Spara kopiera" -knappen för att skapa ikonvariationer (till exempel en spegelbild av en ikon). Lägg till en meningsfull tagg till ikonen, eftersom det här kommer att användas för att generera klassnamnet för det.
När du är klar klickar du på knappen "Font" längst ner på skärmen för att börja skapa teckensnittet. Här kan du tilldela vilken ikon som är mappad till vilken tecken; Om din ikonuppsättning exempelvis är sex bilder av en spinnboll, kan du tilldela tecknen q, w, e, r, t och y till de sex ramarna. Välj ett typsnitt i inställningarna. Du kan också justera typsnittets mätvärden, men om du inte vill ställa in ditt anpassade teckensnitt tillsammans med standardtext behöver du inte oroa dig för det här.
6. Ladda ner fontfilerna
Klicka på "Download" för att ladda ner typsnittet till din maskin. Det kommer att vara en undermapp som innehåller tecknen själva (i WOFF, EOT och TTF-format), samt en HTML-sida för HTML och motsvarande CSS. Det finns till och med en JavaScript-fil med en lösning om du behöver stödja IE 6 eller 7.
Om du vill lägga till teckensnittet i ditt projekt kopierar du underrubriken Skrift till din webbplats. Du kan kopiera och klistra in CSS från style.css till din egen webbplats CSS-fil, men min inställning är att byta namn på den som fonts.css och behåll den som en separat CSS-fil. Du behöver då lägga till en referens till denna CSS-fil i din HTML-fil med hjälp av den relativa länken:
<link rel="stylesheet" href="fonts.css" />I avsnittet @ font-face i CSS-filen måste du ändra URL-referensen till den nya relativa platsen för teckensnitt, eller du kan helt enkelt släppa fontsmappen i din stilarkmapp.
7. Ringa typsnittet
Som du kan se i filen sample.html , finns det två sätt att referera till den anpassade teckensnittet, antingen med dess karaktär (unicode eller namn) eller med dess klassnamn. Det första exemplet använder tillståndet för HTML5- data-ikonen
<div aria-hidden="true" data-icon="g"></div>Här används fs1- klassen för att ställa in storleken på teckensnittet. Den aria-dolda referensen hjälper till att säkerställa att tecknet inte talas av några skärmsläsare.
Den andra metoden använder ett spänningselement:
<span aria-hidden="true"></span>Denna metod är användbar när du vill att symbolen ska sitta inline med normal text.
Om du vill göra ikonen en länk kan du paketera allt i en href :
8. Avancerade idéer
Som vi just har upptäckt med svävartillståndet är det enkelt att ändra ikonens färg så enkelt som att ange färgegenskapen i vår CSS, och ändra storleken är lika lätt som att ställa in egenskapen för teckensnittstorlek. Du kan också ställa in andra egenskaper, till exempel textskuggning och genomskinlighet, samtidigt som du behåller upplösningsoberoende av en typsnitt.
Prova det, och jag garanterar att du aldrig använder bitmappsymboler igen.
Har du försökt använda teckensnitt för ikoner? Hur har du hittat det? Låt oss veta i kommentarerna.