Share
Jeg liker sosiale ikoner, jeg innrømmer det. Jeg har bokstavelig talt dusinvis av sosiale ikon sett jeg har samlet de siste årene, og har selv opprettet noen få sett av mine egne for å prøve å oppnå den perfekte passformen for et bestemt prosjekt.
Men i det siste har jeg oppdaget ikonfonter, og jeg har ikke brukt de gamle bildeikonene på en stund.
Tenk deg dingbats av alle slag og stil - sosiale ikoner, nettstedikoner, alt du kan tenke på - bare de er ikke bilder: de er egentlig fonter.
Det er en stor avtale fordi med bildeikoner får du vel statiske bilder. Du kan få noen forskjellige størrelser av det samme bildet, men du kan virkelig ikke gjøre noe med dem annet enn å bruke dem som er.
Et ikon som egentlig er en skrifttype, er et helt annet dyr. Selv om det er sant at ikonene er enklere i utseende, de gjør opp for minimalisme ved å være svært tilpasses. Med en ikonfont kan du enkelt endre et ikons størrelse og farge (akkurat som tekstfonter!). I tillegg har ikonfonter gjennomsiktig bakgrunn som virkelig fungerer i gamle versjoner av Internet Explorer, hvis du jobber i en gammel versjon av IE, er en vurdering for deg.
En annen fordel er at de kan erstatte CSS image sprites. Bruke et egendefinert ikon skrift med et begrenset antall ikoner fungerer på samme måte som bilde sprites, men gir deg muligheten til å style ikoner som tekst.
Hvorvidt et ikon skrifttype vil fungere bedre enn bildeikoner i ditt eget prosjekt, er det opp til deg å bestemme; de har begge fordeler og ulemper. Men for vårt formål antar vi at du er klar til å prøve ikonfonter og vil vite hvordan du bruker dem i et WordPress-tema.
For vår veiledning legger vi sammen et lite sett med sosiale ikoner for ikon for vårt hypotetiske prosjekt. Vi trenger ikoner for Facebook, Twitter og Pinterest, så la oss komme i gang.
Det er et lite antall online-ikonfonterminatorer som lar deg lage egendefinerte skriftsett bare for deg. Du kan opprette egendefinerte skrifter på prosjekt-for-prosjekt basis; det er så praktisk! Her skal vi bruke generatoren appen fra Icomoon som det er tjenesten jeg har brukt hyppigst.
Icomoons skriftgenerator er morsom og enkel å bruke - du kan velge mellom en rekke ikonfonter gratis og andre som er kommersielle. Jeg har funnet kvaliteten på skrifttypene de tilbyr, å være svært høye. Du kan til og med laste opp ikonfonter du finner andre steder, og bruk dem i din egendefinerte skrifttype. Veldig praktisk.
La oss bygge vår egendefinerte sosiale medier-ikon skrift. Jeg kommer til å anta at du aldri har gjort dette før, men ikke bekymre deg hvis du trenger å hoppe framover. Vi vil ta opp.
Start Icomoon-appen i nettleseren din, og dette er hva du vil se:
Det frie settet med grunnleggende ikonfonter er lastet, og du kan også se noen andre gratis ikonfonter, så vel. Jeg vil anbefale å ta en titt på de andre settene som ikke ble lastet, for du kan finne noe du liker der. For å vise de andre tilgjengelige settene, bla til bunnen og klikk Flere ikonsett.
På neste skjerm ser du en rekke andre gratis og kommersielle skrifttyper (Entypo er et veldig fint sett som jeg bruker ofte, bare FYI). Hvis du vil legge til noen av disse i hovedvalgvinduet, klikker du bare på Legg til knappen under det settet.
Når du er tilbake på hovedskjermbildet, og hvis du vil fjerne et sett, klikker du på menyikonet øverst til høyre og deretter Fjern sett.
Hvis du har ditt eget ikon skrift, kanskje en du har fått fra en klient eller lastet ned fra et annet nettsted, kan du laste det opp ved å klikke på Importer ikoner knappen øverst på valgskjermen, og det vil laste ikonene i settet ditt. Du kan lage skrifttypevalg fra dette settet, akkurat som de typiske Icomoon-skrifttypene.
For vårt prosjekt leter vi etter sosiale ikoner for Facebook, Twitter og Pinterest. Mange av de tilgjengelige settene har noen eller alle disse ikonene, så hvordan velger du det?
Velge ikoner alt fra samme sett er en enkel løsning - hvis et sett du liker (og en som passer til prosjektets behov) har alle ikonene du trenger, flott. Bruk disse. Noen ganger er det ikke tilfelle skjønt - kanskje det som har satt deg ut, har ikke et Pinterest-ikon, eller YouTube-en er en liten ekorn.
Hvis det er tilfelle, velg og velg fra forskjellige sett, men vær forsiktig - Icomoon bruker en grunnlinje for hver av dens ikonfonter; for Icomoon Free-settet er gridstørrelsen 16. Du får de beste resultatene (det skarpeste utseendet) i en nettleser når du angir skriftstørrelsen lik 16 eller flere av 16.
Hvis du ser på Entypo-skriftikonet jeg nevnte tidligere, vil du se at basestørrelsen er 20, noe som betyr at du må sette skriftstørrelsen til 20 eller flere av det for å få de beste resultatene. Hvis du vil blande ikoner fra sett med forskjellige gridstørrelser, må du bare sjekke dem i nettleseren din for å se om skjermkvaliteten er akseptabel. Du kan se gridstørrelsene for alle Icomoon-skrifter ved å klikke på Se flere skrifttyper nederst på appens hovedvindu.
Gitt det vurderingen, kan du bruke søkeverktøyet øverst på appen for å søke etter ikoner med navn slik at du kan sammenligne flere versjoner av det samme sosiale ikonet sammen.
Selvfølgelig kan du også bare bla gjennom settene, som er en fin måte å miste en time på.
For å velge ikonene, bare klikk på dem. De vil bli lagt til settet ditt automatisk. Når du er ferdig, klikk på Font knappen nederst og du vil se alle ikonene dine klar til nedlasting. Klikk på nedlasting knappen for å få din nye, perfekte tilpassede skrifttype, og du vil se en tekstboks der du kan navngi fonten din. Jeg kaller det vanligvis for klienten for å holde dem rett; i dette tilfellet vil jeg kalle det 'opplæring.'
Hva skjer hvis du lager denne egendefinerte fonten, så bestemmer klienten at de vil legge til, si, Vimeo og Instagram til deres sosiale medierkoblinger neste måned? Må du starte fra grunnen av?
Nei, det gjør du ikke.
I nedlastingen din vil du bli en selection.json fil som lagrer alle dine prosjektinnstillinger. Alt du trenger å gjøre er å åpne Icomoon-appen og klikk Importer ikoner å laste opp JSON-filen, og valgene dine vil bli vist på nytt. Du legger til de nye ikonene, deretter gjenskaper skrifttypen og laster den ned igjen.
Nå kommer vi til de semi-vanskelige delene.
Last opp de fire filene i / skrifter mappe av din egendefinerte font til en / skrifter mappe i temaet ditt.
Åpne style.css filen i din egendefinerte skrifttype og kopier den @ Font-face koden som ser slik ut:
Accentsconagua
@ font-face font-family: 'tutorial'; src: url ( 'skrifter / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') format ('woff'), url ('skrifter / opplæring. ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); font-weight: normal; font-style: normal; Deretter, i temaet ditt style.css fil, lim inn denne koden. Husk å endre nettadressen der skriftene vil være i temaet ditt hvis du bruker noe annet enn «fonts» -katalogen.
Det er to hovedmetoder for å gjøre dette; en bruker en klasse for hvert ikon for å legge dem til som pseudo-elementer (dette er det jeg bruker), og den andre bruker et datatributt for å legge dem til som faktiske elementer i HTML.
Her er et eksempel på hvordan du bruker klassen per ikonmetoden i en uordnet liste. La oss si at vi får en funksjon som plasserer en rad sosiale ikoner i toppteksten av temaet ditt - disse skjermbildene viser noen få eksempler på hvordan du kan bruke dette.
Gå inn i temaet ditt functions.php fil og legg til denne koden:
Deretter går du tilbake til din tilpassede ikonfonts stil.css-fil og kopierer følgende utdrag:
[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; snakk: ingen; font-style: normal; font-weight: normal; font variant: normal; tekst-transformasjon: ingen; linjehøyde: 1; / * Bedre Font Rendering =========== * / -webkit-font-utjevning: antialiased; -moz-osx-font-utjevning: gråtoner; .icon-facebook: før innhold: "\ e600"; .icon-twitter: før innhold: "\ e601"; .icon-pinterest: før innhold: "\ e602";
Lim inn dette utsnittet i temaet ditt style.css fil. Hvis alt går som planlagt, bør du nå ha tre ikoner i overskriften, og du kan endre farge, størrelse og andre attributter akkurat som tekst.
Noen ganger har Chrome et ikon for feilgjennomgang - hvis de ser hakket ut i Chrome, kan du prøve å omorganisere din @ Font-face utdrag som dette med SVG følgende EOT:
@ font-face font-family: 'tutorial'; src: url ( 'skrifter / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonter / tutorial.svg? 6npck9 # opplæring') format ('svg'), url tutorial.woff? 6npck9 ') format (' woff '), url (' fonter / tutorial.ttf? 6npck9 ') format (' truetype '); font-weight: normal; font-style: normal; Den andre metoden for å få ikoner inn i temaet ditt er å bruke dataattributter for å sette dem inn som elementer. Jeg er ikke en stor fan av denne metoden fordi det betyr å sette ikonet i selve HTML-en, og jeg har funnet det å være mer forvirrende. Men her går vi, du kan finne deg som en metode mer enn den andre.
I functions.php, Du vil bruke dataattributter som dette:
Og i temaet ditt style.css:
[data-ikon]: før font-family: 'tutorial'; innhold: attr (data-ikon); snakk: ingen; font-weight: normal; font variant: normal; tekst-transformasjon: ingen; linjehøyde: 1; -webkit-font-utjevning: antialiased;
Nå vet du grunnleggende om å lage og bruke egendefinerte ikonfonter i WordPress-temaet ditt - ikke for vanskelig. Finn noen ikoner du liker, og prøv dette på ditt neste prosjekt.
Her er noen ressurser for å ta det neste trinnet. Hvem vet; Du kan finne deg selv å designe ditt eget ikon skrift på et tidspunkt, når du bare ikke kan finne riktig skrift for det aktuelle prosjektet.
Andre steder å generere egendefinerte ikonfonter:
Hvis du vil ha mer informasjon om bruk av dataattributter, har CSS Tricks en god oversikt.
