Jeg hadde laget noen pene ikoner for et webdesign, jeg gjorde, og jeg forhåndsviste det nye nettstedet på en gammel iPad. Oppsettet så OK i normal størrelse, men så inn i en del av siden, så jeg plutselig at ikonet mitt var et uklart råtta, mens den tekstbaserte overskriften fortsatt var skarp og skarp. På en nyere Retina-display-iPad ser ikke ikonene seg ganske skarpe, selv i normal størrelse.

Den første ideen jeg hadde, var å lage dobbeltspunnede sprite-bilder, slik at de skulle vises på halvparten av størrelsen ved hjelp av CSS. Mens dette fikk dem til å se bedre ut på en Retina-skjerm i normal størrelse, så snart du begynte å klemme og zoome, returnerte blurriness. Men teksten var fortsatt så skarp og pinskarp.

Svaret var tydelig. Jeg trengte å slå ikonene inn i en skrifttype.

I denne opplæringen ser vi på hvordan du kan slå vektormikoner inn i en webfontype ved hjelp av en flott gratis webapp som heter IcoMoon. Deretter ser vi på hvordan du bruker de genererte skrifttypefilene og CSS på en nettside.

Fordelene ved å bruke et ikon font

En ikonfont har flere fordeler over bitmap-bilder, i tillegg til bildeskarphet.

  • Egnethet: Et ikonfonter vil være mye mindre i filstørrelse enn en serie bilder, spesielt hvis du har brukt tosidige bilder for Retina-skjermer. Og når skrifttypen er lastet, gir ikonene dine øyeblikkelig, uten å måtte laste ned et bilde.
  • Skalerbarhet: Et ikonfont kan settes til enhver størrelse ved å sette inn font-size eiendom i den medfølgende CSS. Dette gjør at du kan eksperimentere med forskjellige størrelser; mens for bitmap-bilder, må du sende ut en bildefil i hver størrelse.
  • Fleksibilitet: Teksteffekter kan enkelt brukes på ikonet ditt, inkludert farger, drop shadows og rollover states. De vil også vise godt mot hvilken som helst farge- eller bildebakgrunn.
  • Kompatibilitet: Webfonter støttes av alle moderne nettlesere og eldre nettlesere, også IE 6 og tidligere.

Så, la oss komme i gang!

Opprette et ikon skrift

Symbolfonter kan bygges ved hjelp av en dedikert skriftopprettingsapp, for eksempel glyphs , men et profesjonelt typografiverktøy ligger langt utover behovet eller kravene til å bygge et enkelt ikonfont, der forholdet mellom tegn (dvs. kjerne og ligaturer) ikke er viktig.

Langt den enkleste måten er å bruke en flott gratis online app som heter IcoMoon , av Keyamoon, som tar bort all bryet med å konvertere symboler til en web skrifttype.

Denne HTML5-appen fjerner all smerten i å lage skrifttypefiler for enkle bruksområder, for eksempel bygningsikonfonter. IcoMoon leveres med en rekke ikonsett som allerede er lastet, og du kan legge til flere i biblioteket ditt, hvorav de fleste kan brukes gratis (kontroller lisensieringen). Hvis du leter etter ganske standard ikoner, for eksempel "filnedlasting" og "handlekurv", kan det hende du finner ut at bruk av en av disse er å foretrekke for å lage din egen.

Steg for steg

1. Forbered bildene dine

Til å begynne med må du lage ikonene i et vektor tegneprogram som kan eksportere til SVG-format, for eksempel Illustrator eller Inkscape.

Mens du designer, kan du jobbe med hvilke farger du liker, men ikonene må være en solid farge. Pass på at hvert ikon er omtrent samme størrelse. Å ha ett ikon mye høyere eller lengre enn en annen, vil gjøre det vanskelig å bygge en konsekvent skrifttype. Her har jeg hatt å redusere bredden på mitt luftskipikon, slik at den passer til de andre.

2. Rengjør

Kontroller hvert ikon nøye for å forsikre deg om at det ikke er ufullkommenheter - detaljer som ser OK ut i mindre størrelser, kan skjule små feil når de er zoomet inn. I ikonet som vises nedenfor, må jeg fjerne de skråstilt trinnene som har skjedd i når lagdelingselementene er lagt inn.

I Illustrator, bruk Pathfinder-verktøyet for å forene overlappende elementer, og Minus Front-elementet for å fjerne utklippselementer, for eksempel stjernen i disse ikonene.

Hovedprinsippet er å sikre at ikonet ditt er lesbart på små skalaer. Forenkle så mye som mulig.

3. Eksporter til SVG

Velg nå et ikon, og kopier og lim det inn i et nytt firkantet dokument (for eksempel 200 × 200 piksler). Skal ikonet slik at det passer. Det kan hende du finner det nyttig å angi en linjelinje. Farge ikonet slik at det er solidt svart på en hvit bakgrunn.

Velg nå File… Save as og lagre filen som en SVG-fil. Bruk standard SVG-innstillinger. Når du har gjort dette for alle ikonene, er du klar til å lage en web skrifttype.

4. Importer til IcoMoon

Åpne IcoMoon web app . For å importere et ikon klikker du på «Importer ikoner» -knappen, og velg deretter SVG-filene du vil legge til - du kan legge til flere filer samtidig. Disse vil da vises under "Dine tilpassede ikoner." Hvis de er uthevet i gult, vil de være en del av ikonfonten du vil opprette. I dette eksemplet kan du se at jeg har bestemt meg for ikke å eksportere en av mine egne ikoner, og jeg har lagt til en av ikonene fra "Mini-ikonene."

5. Eksporter skrift fra IcoMoon

Du kan klikke på "Rediger" -knappen hvis du vil justere ikonets posisjon, dimensjonering eller rotasjon. Bruk "Save Copy" -knappen for å opprette ikonvarianter (for eksempel et speilbilde av et ikon). Legg til en meningsfull tag til ikonet, fordi dette vil bli brukt til å generere klassenavnet for det.

Når du er klar, klikker du på "Font" -knappen nederst på skjermen for å begynne å generere fonten. Her kan du tildele hvilket ikon som er kartlagt til hvilket tegn; for eksempel hvis ikonet er seks bilder av en spinnkule, kan du tildele tegnene q, w, e, r, t og y til de seks bildene. I innstillingene velger du et skriftnavn. Du kan også justere skriftstørrelsen, men med mindre du skal angi din egendefinerte skrifttype sammen med standardtekst, trenger du ikke å bekymre deg for dette.

6. Last ned skriftfiler

Klikk på "Last ned" for å laste ned skriftpakken til maskinen din. Det vil være en undermappe som inneholder skriftene selv (i WOFF, EOT og TTF formater), samt en HTML-side og tilsvarende CSS. Det er enda en JavaScript-fil med en løsning hvis du trenger å støtte IE 6 eller 7.

For å legge til skrifter i prosjektet ditt, kopier skrifter undermappen til nettstedet ditt. Du kan kopiere og lime inn CSS fra style.css til ditt eget nettsteds CSS-fil, men min tilnærming er å endre navn på den som fonts.css og beholde den som en egen CSS-fil. Du må da legge til en referanse til denne CSS-filen i HTML-filen din ved hjelp av den relative linken:

<link rel="stylesheet" href="fonts.css" />

I @ font-face- elementet i CSS-filen må du endre URL-referansen til den nye relative plasseringen av skrifttypene, eller du kan ganske enkelt slippe fontsmappen i stilarkmappen din.

7. Kaller skrifttypen

Som du kan se i sample index.html- filen, er det to måter å referere til den egendefinerte skrifttypen, enten ved tegn (unicode eller navn) eller ved navn på klassen. Det første eksemplet bruker tilstanden for HTML5- data-ikonet

<div aria-hidden="true" data-icon="g"></div>

Her brukes fs1- klassen til å angi skriftstørrelsen. Den aria-skjulte referansen bidrar til å sikre at tegnet ikke taler av noen skjermlesere.

Den andre metoden bruker et spenningselement:

<span aria-hidden="true"></span>

Denne metoden er nyttig når du vil at symbolet skal sitte på linje med vanlig tekst.

Hvis du vil gjøre ikonet en kobling, kan du pakke alt sammen i en href :

8. Avanserte ideer

Som vi nettopp har oppdaget med hover-tilstanden, er det så enkelt å endre farge på ikonet som å sette fargeegenskapen i CSS, og å endre størrelsen er like enkelt som å angi skriftstørrelsesegenskapen. Du kan også angi andre egenskaper, for eksempel tekstskygge og gjennomsiktighet, alt mens du beholder oppløsnings-uavhengigheten til en skrift.

Prøv det, og jeg garanterer at du aldri vil bruke bitmap-ikoner igjen.

Har du prøvd å bruke skrifter for ikoner? Hvordan har du funnet den? Gi oss beskjed i kommentarene.