Share
Ik hou van sociale iconen, ik geef het toe. Ik heb het letterlijk tientallen van sociale pictogrammen die ik de afgelopen jaren heb verzameld, en zelfs een paar sets van mezelf hebben gemaakt om te proberen die perfecte pasvorm voor een bepaald project te bereiken.
Maar de laatste tijd heb ik pictogramlettertypen ontdekt en ik heb die oude afbeeldingspictogrammen al een tijdje niet meer gebruikt.
Stel je voor dingbats van elke soort en stijl - sociale pictogrammen, websitepictogrammen, alles wat je maar kunt bedenken - alleen het zijn geen afbeeldingen: ze zijn eigenlijk fonts.
Dat is erg, want met beeldpictogrammen krijg je, nou ja, statische beelden. Je krijgt misschien een paar verschillende formaten van dezelfde afbeelding, maar je kunt echt niets met ze doen anders dan ze zoals ze zijn te gebruiken.
Een pictogram dat eigenlijk een lettertype is, is een heel ander dier. Hoewel het waar is dat de pictogrammen er eenvoudiger uitzien, maken ze hun minimalisme goed door ze in hoge mate aanpasbaar te maken. Met een pictogramlettertype kunt u eenvoudig de grootte en kleur van een pictogram wijzigen (net als tekstlettertypen!). Plus, pictogramlettertypen hebben transparante achtergronden die echt werken in oude versies van Internet Explorer, als werken in een oude versie van IE een overweging voor u is.
Een ander voordeel is dat ze CSS-beeldsprites kunnen vervangen. Het gebruik van een aangepast pictogramlettertype met een beperkt aantal pictogrammen werkt op dezelfde manier als afbeeldingssprites, maar geeft je de mogelijkheid om pictogrammen zoals tekst te stylen.
Of een pictogramlettertype beter zal werken dan afbeeldingspictogrammen in uw specifieke project, is aan u om te beslissen; ze hebben allebei voor- en nadelen. Maar voor onze doeleinden gaan we ervan uit dat u klaar bent om pictogramlettertypen uit te proberen en wilt u weten hoe u ze kunt gebruiken in een WordPress-thema.
Voor onze zelfstudie zullen we een kleine set social media-lettertypepictogrammen voor ons hypothetische project samenstellen. We hebben pictogrammen nodig voor Facebook, Twitter en Pinterest, dus laten we aan de slag gaan.
Er is een klein aantal online pictogramlettertype-generators waarmee u aangepaste lettertypesets speciaal voor u kunt maken. U kunt aangepaste lettertypen maken op projectbasis; het is zo handig! Hier gaan we de generator-app van Icomoon gebruiken, want dat is de service die ik het vaakst heb gebruikt.
De lettertype-generator van Icomoon is leuk en gemakkelijk te gebruiken - je kunt gratis kiezen uit een aantal pictogramlettertypen en andere voor commerciële doeleinden. Ik heb de kwaliteit van de lettertypen die ze aanbieden zeer hoog gevonden. U kunt zelfs pictogramlettertypen uploaden die u elders vindt en deze in uw aangepaste lettertype gebruiken. Heel handig.
Laten we ons eigen lettertype voor sociale mediapictogrammen maken. Ik ga ervan uit dat je dit nog nooit eerder hebt gedaan, maar maak je geen zorgen als je vooruit moet springen. We halen het in.
Start de Icomoon-app in uw browser en dit is wat u zult zien:
De gratis set standaard Icomoon-lettertypen is geladen en mogelijk ziet u ook enkele andere gratis pictogramlettertypen. Ik raad je aan de andere niet-geladen sets te bekijken, omdat je daar misschien iets vindt dat je leuk vindt. Om de andere beschikbare sets te bekijken, scrolt u naar beneden en klikt u op Meer pictogrammensets.
Op het volgende scherm zie je een aantal andere gratis en commerciële lettertypen (Entypo is een hele leuke set die ik vaak gebruik, alleen maar voor FYI). Om een van deze toe te voegen aan het hoofdselectievenster, klikt u gewoon op Toevoegen knop onder die set.
Als u weer terug bent in het hoofdscherm en u een set wilt verwijderen, klikt u op het menupictogram in de rechterbovenhoek en vervolgens op Set verwijderen.
Als u uw eigen pictogramlettertype hebt, misschien een lettertype dat u van een client hebt gekregen of van een andere site hebt gedownload, kunt u het uploaden door op de knop te klikken. Pictogrammen importeren knop aan de bovenkant van het selectiescherm en laadt de pictogrammen in uw set. U kunt lettertypeselecties uit deze set maken, net zoals de native Icomoon-lettertypesets.
Voor ons project zoeken we sociale pictogrammen voor Facebook, Twitter en Pinterest. Veel van de beschikbare sets hebben enkele of al deze pictogrammen, dus hoe kies je?
Het kiezen van iconen allemaal uit dezelfde set is een eenvoudige oplossing - als een set die je leuk vindt (en een die past bij de ontwerpbehoeften van het project) alle pictogrammen heeft die je nodig hebt, geweldig. Gebruik die. Soms is dat echter niet het geval - misschien heeft die set die u leuk vindt geen Pinterest-pictogram, of is YouTube een beetje squirrelly.
Als dat het geval is, kies en kies uit verschillende sets, maar wees voorzichtig - Icomoon gebruikt een basisrasterformaat voor elk van de pictogramlettertypen; voor de Icomoon Free-set is de grid-grootte 16. U krijgt de beste resultaten (het scherpste uiterlijk) in een browser wanneer u de lettergrootte instelt op 16 of een veelvoud van 16.
Als je kijkt naar het Entypo-lettertypepictogram dat ik eerder noemde, zie je dat het basisraster 20 is, wat betekent dat je je lettergrootte moet instellen op 20 of een veelvoud daarvan om de scherpste resultaten te krijgen. Als u pictogrammen uit sets met verschillende basisrasterformaten wilt mengen, hoeft u ze alleen in uw browser te controleren om te zien of de weergavekwaliteit acceptabel is. U kunt de rastergroottes voor alle Icomoon-lettertypen bekijken door op te klikken Meer lettertypen weergeven onderaan het hoofdvenster van de app.
Met die overweging kunt u de zoekfunctie boven aan de app gebruiken om pictogrammen op naam te zoeken, zodat u verschillende versies van hetzelfde sociale pictogram met elkaar kunt vergelijken..
Je kunt natuurlijk ook gewoon door de sets bladeren, wat een goede manier is om een uur te verliezen.
Klik op hen om uw pictogrammen te kiezen. Ze worden automatisch aan je set toegevoegd. Als u klaar bent, klikt u op de doopvont knop onderaan en je ziet al je iconen klaar om te downloaden. Klik op de Download om uw nieuwe perfecte aangepaste lettertype te krijgen en u ziet een tekstvak waarin u uw lettertype een naam kunt geven - ik noem het gewoonlijk voor de klant om ze recht te houden; in dit geval zal ik het 'tutorial' noemen.
Wat gebeurt er als je dit aangepaste lettertype maakt, dan wil de client volgende maand bijvoorbeeld Vimeo en Instagram toevoegen aan hun links naar sociale media? Moet je helemaal opnieuw beginnen??
Nee, dat doe je niet.
In uw download zal een zijn selection.json bestand dat al uw projectinstellingen opslaat. Het enige dat u hoeft te doen, is de Icomoon-app openen en klikken Pictogrammen importeren om het JSON-bestand te uploaden en uw selecties worden opnieuw weergegeven. U voegt de nieuwe pictogrammen toe, maakt het lettertype opnieuw en download het opnieuw.
Nu komen we bij de semi-lastige delen.
Upload de vier bestanden in de / fonts map van uw eigen lettertype naar a / fonts map in uw thema.
Open de style.css bestand in uw eigen lettertype en kopieer het @ Font-face snippet dat er zo uitziet:
Accentsconagua
@ font-face font-family: 'tutorial'; src: url ( 'fonts / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') formaat ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') formaat ('woff'), url ('fonts / tutorial. ttf? 6npck9 ') formaat (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') formaat (' svg '); font-gewicht: normaal; lettertype: normaal; Dan, in uw thema's style.css bestand, plak dit fragment. Vergeet niet de URL te wijzigen waar de lettertypen in uw thema staan als u iets anders gebruikt dan de map 'fonts'.
Er zijn twee hoofdmethoden om dit te doen; men gebruikt een klasse voor elk pictogram om ze toe te voegen als pseudo-elementen (dit is degene die ik gebruik), en de ander gebruikt een gegevensattribuut om ze toe te voegen als echte elementen in de HTML.
Hier is een voorbeeld van het gebruik van de klasse-per-pictogrammethode in een ongeordende lijst. Laten we zeggen dat we een functie hebben die een rij sociale pictogrammen in de kop van uw thema plaatst - deze schermafbeeldingen laten een paar voorbeelden zien van hoe u dit zou kunnen gebruiken.
Ga naar je thema's functions.php bestand en voeg deze code toe:
Ga vervolgens terug naar het style.css-bestand van het aangepaste pictogram en kopieer het volgende fragment:
[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; spreek: geen; lettertype: normaal; font-gewicht: normaal; lettertype-variant: normaal; text-transform: none; regelhoogte: 1; / * Betere lettertypeweergave =========== * / -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grijswaarden; .icon-facebook: before content: "\ e600"; .icon-twitter: before content: "\ e601"; .icon-pinterest: before content: "\ e602";
Plak dit fragment in je thema's style.css het dossier. Als alles volgens plan verloopt, moet u nu drie pictogrammen in uw kop hebben en kunt u de kleur, de grootte en andere kenmerken wijzigen, net als tekst.
Soms heeft Chrome een probleem met het renderen van pictogramlettertypen - als ze in Chrome choppy lijken, probeer je het opnieuw te ordenen @ Font-face snippet als dit met SVG volgende EOT:
@ font-face font-family: 'tutorial'; src: url ( 'fonts / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') formaat ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') formaat ('svg'), url ('fonts / tutorial.woff? 6npck9 ') formaat (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') formaat (' truetype '); font-gewicht: normaal; lettertype: normaal; De andere methode om pictogrammen in uw thema te krijgen, is door gebruik te maken van gegevensattributen om ze als elementen in te voegen. Ik ben geen grote voorstander van deze methode, omdat het betekent dat het pictogram in de HTML zelf moet worden geplaatst, en ik vind het meer verwarrend. Maar hier gaan we, misschien vindt u de ene methode beter dan de andere.
In functions.php, je gebruikt data-attributen zoals dit:
En in uw thema's style.css:
[data-icoon]: vóór font-family: 'tutorial'; inhoud: attr (data-icoon); spreek: geen; font-gewicht: normaal; lettertype-variant: normaal; text-transform: none; regelhoogte: 1; -webkit-font-smoothing: antialiased;
Nu kent u de basisprincipes van het maken en gebruiken van aangepaste pictogramlettertypen in uw WordPress-thema - niet te moeilijk. Zoek enkele pictogrammen die u bevallen en probeer dit bij uw volgende project.
Hier zijn enkele bronnen voor het maken van de volgende stap. Wie weet; je zult merken dat je op een gegeven moment je eigen pictogramlettertype ontwerpt, als je gewoon niet het juiste lettertype voor dat specifieke project kunt vinden.
Andere plaatsen om aangepaste pictogramlettertypen te genereren:
Als u meer informatie wilt over het gebruik van gegevensattributen, heeft CSS Tricks een goed overzicht.
