Gjøre bruk av Genericons Font på nettstedet ditt

Jeg tror at ikonfonter er en av de største ideene som er født i den gylne alderen av webdesign. Noen gode gutter på Automattic føler sannsynligvis på samme måte, siden de bestemte seg for å komme opp med et fint ikonfelt som heter Genericons. I denne artikkelen skal vi lære hvordan fantastiske ikonfonter er, og hvordan du skal bruke genericons-fonten.

Betydningen av ikonfonter

Som jeg sa, lever vi i gullalderen av webdesign. Nye teknologier blir født hver dag, og nettlesere vedtar dem raskt. I tillegg til den nye teknologien, er det nye designteknikker som kommer frem over hele verden.

I denne gyldne tiden er responsiv webdesign uten tvil en av de mest populære konseptene. I en verden full av forskjellige enheter som kobler seg til Internett som bærbare datamaskiner, tabletter og smarttelefoner, utformer våre design i henhold til enhetens dimensjoner og pikseldensiteter. Som webdesignere har det blitt en daglig vane å flytte elementer og skala grafikk for å gjøre vårt designarbeid i en rekke enheter, fra 27-tommers Apple-skjermer til Kindles.

Det er der ikonfonter kommer til nytte.

Fordeler ved bruk av ikonfonter

Som en gave fra lydhør webdesign, brukes ikonfonter til å tilby en optimalisert og skalerbar pakke med grafikk til besøkende på en hvilken som helst enhet. Dessuten gjør deres kompatibilitet på tvers av nettleseren at vi får dem til å fungere selv på gamle nettlesere, så våre besteforeldre og folkene på DMV kan også nyte skarpe, splitter nye ikoner!

Spøk til side, her er de viktigste fordelene du kan dra nytte av med et ikon skrift:

• Ikonfonter er skalerbare. Dette betyr at uansett hvor stort ikonet ditt blir, trenger du ikke å gå på kompromiss med bildekvalitet eller filstørrelse.
• Ikonfonter kan forbedres med enkle linjer med CSS. Du trenger ikke åpne din store ol 'bilde editor for å endre sine farger eller legge til skygger til dem. Åpenhet? Kryss av. CSS gradienter? Kryss av. 3D-rotasjon? Kryss av. Du får ideen. Med noen få linjer med CSS-kode, kan du gjøre nesten alt du kan gjøre med teksten. Tross alt er disse ikonene teknisk biter av tekst.
• Ikon skrifter har fantastisk nettleser støtte. Siden de er fonter og til og med Internet Explorer 7 støtter skrifter, trenger du ikke å bekymre deg for om de kommer til å mislykkes for å vises på eldre nettlesere.
• Ikonfonter er små i filstørrelse. Dette kan høres ut som et kontroversielt argument (siden en pakke med PNG-ikoner kan være nesten like liten som ikonfonter), men du kan se at WOFF-formatet for Genericons, for eksempel, er bare 11 KB i filstørrelse. I tillegg må du inkludere ting som my-icon-2x.png hvis du trenger større bilder. I tillegg gir ikonfonter bare en HTTP-forespørsel.

Bruke Genericons

Genericons er et ganske flott ikon font skapt av Automattic, også grunnleggerne av WordPress. Skriften inneholder 121 ikoner ved utgangen av 2013, og den vokser hvert eneste øyeblikk. Det er også lisensiert med GPL, så vi kan bruke denne søte pakken med ikoner i alle våre åpne kildeprosjekter med kompatible lisenser.

Hvis du ikke bruker en ikonfont i WordPress-webområdet, kan det nå være tid å inkludere Genericons!

Inkludert det i temaet ditt

Hvis du vil bruke denne ikonfonten i temaet ditt, er det bare noen få enkle trinn å følge:

1. Last ned Genericons ved å klikke på giganten nedlasting knappen på nettsiden.
2. Last opp font mappe inn i temaets rotmappe. Hvis du vil, kan du omdøpe mappen og legge den inn i en annen mappe.
3. Kopier innholdet i genericons.css filen inn i temaet ditt style.css fil. (Hvis du endret navnet og banen til fontmappen, ikke glem å gjøre endringer i CSS for å fikse banen til fontfiler.)

Det er det, ditt tema er nå 100% Genericons kompatible! Du kan nå bruke ikonene i HTML-elementene dine slik:

 Denne koblingen har tablettikonet!

Hvis du vil bruke et ikon som et eget element, må du bruke HTML-element, slik som dette:

  Denne koblingen har også tablettikonet!

 Denne koblingen har tablettikonet!  Denne koblingen har også tablettikonet!

 [generikonikon = nettbrett] Denne koblingen har også tablettikonet!