Gebruik maken van het Genericons-lettertype op uw website

Ik geloof dat pictogramlettertypen een van de beste ideeën zijn die ooit zijn geboren in de gouden eeuw van webdesign. Sommige geweldige jongens bij Automattic voelen zich waarschijnlijk hetzelfde, omdat ze besloten om met een leuk pictogramlettertype Genericons te komen. In dit artikel gaan we leren hoe coole pictogramlettertypen zijn en hoe je het Genericons-lettertype kunt gebruiken.

Het belang van pictogramlettertypen

Zoals ik al zei, leven we in het gouden tijdperk van webdesign. Elke dag worden er nieuwe technologieën geboren en browsers adopteren ze snel. Naast de nieuwe technologieën, komen er nieuwe ontwerptechnieken naar voren over de hele wereld.

In dit gouden tijdperk is responsief webdesign misschien wel een van de meest populaire concepten. In een wereld vol verschillende apparaten die verbinding maken met internet zoals laptops, tablets en smartphones, waarbij onze ontwerpen worden vormgegeven op basis van de afmetingen van het apparaat en de pixeldichtheid. Als webontwerpers is het een dagelijkse gewoonte geworden om elementen te verplaatsen en afbeeldingen te schalen om ons ontwerp op verschillende apparaten te laten werken, van 27-inch Apple-monitoren tot Kindles.

Dat is waar pictogramlettertypen van pas komen.

Voordelen van het gebruik van pictogramlettertypen

Als geschenk van responsief webontwerp worden pictogramlettertypen gebruikt om een ​​geoptimaliseerd en schaalbaar pakket grafische afbeeldingen aan bezoekers op elk apparaat te bieden. Dankzij hun compatibiliteit met andere browsers kunnen we ze zelfs in oude browsers laten werken, zodat onze grootouders en de mensen bij de DMV ook kunnen genieten van frisse, gloednieuwe pictogrammen!

Een grapje terzijde, hier zijn de belangrijkste voordelen waarvan u kunt profiteren met een pictogramlettertype:

• Pictogramlettertypen zijn schaalbaar. Dit betekent dat het niet uitmaakt hoe groot uw pictogram wordt, u hoeft geen concessies te doen aan de beeldkwaliteit of bestandsgrootte.
• Pictogramlettertypen kunnen worden uitgebreid met eenvoudige CSS-regels. U hoeft niet uw grote olieafbeeldeditor te openen om hun kleuren te wijzigen of schaduwen eraan toe te voegen. Transparantie? Controleren. CSS-gradiënten? Controleren. 3D-rotatie? Controleren. Je snapt het idee. Met een paar regels CSS-code kun je bijna alles doen wat je met je tekst kunt doen. Deze iconen zijn immers technisch stukjes tekst.
• Pictogramlettertypen hebben geweldige ondersteuning voor browsers. Omdat ze dat zijn fonts en zelfs Internet Explorer 7 ondersteunt lettertypen, u hoeft zich geen zorgen te maken of ze in oudere browsers niet zullen verschijnen.
• Pictogramlettertypen zijn klein qua bestandsgrootte. Dit klinkt misschien als een controversieel argument (aangezien een pakket met PNG-pictogrammen bijna net zo klein kan zijn als pictogramlettertypen), maar je ziet dat het WOFF-formaat van Genericons bijvoorbeeld slechts 11 KB groot is in bestandsgrootte. Plus, je moet dingen zoals opnemen mijn-icon-2x.png als u grotere afbeeldingen nodig heeft. Bovendien maken pictogramlettertypen slechts één HTTP-verzoek.

Genericons gebruiken

Genericons is een vrij groot pictogramlettertype gemaakt door Automattic, ook de oprichters van WordPress. Het lettertype bevat 121 pictogrammen vanaf eind 2013, en het wordt af en toe groter. Het is ook gelicentieerd met de GPL, dus we kunnen dit zoete pakket met pictogrammen gebruiken in al onze open-sourceprojecten met compatibele licenties.

Als u geen pictogramlettertype op uw WordPress-website gebruikt, kan het nu tijd zijn om Genericons op te nemen!

Het opnemen in uw thema

Als u dit pictogramlettertype in uw thema wilt gebruiken, zijn er slechts een paar eenvoudige stappen om te volgen:

1. Download Genericons door op de reus te klikken Download knop op de website.
2. Upload de doopvont map in de hoofdmap van uw thema. Als u wilt, kunt u de map hernoemen en in een andere map plaatsen.
3. Kopieer de inhoud van de genericons.css bestand in uw thema's style.css het dossier. (Als u de naam en het pad van de map met het lettertype hebt gewijzigd, vergeet dan niet om wijzigingen in de CSS aan te brengen om het pad van de lettertypebestanden te herstellen.)

Dat is het, uw thema is nu 100% Genericons-compatibel! U kunt nu de pictogrammen in uw HTML-elementen als volgt gebruiken:

 Deze koppeling bevat het tabletpictogram!

Als u een pictogram als een afzonderlijk element wilt gebruiken, moet u de HTML-element, zoals dit:

  Deze link bevat ook het tabletpictogram!

 Deze koppeling bevat het tabletpictogram!  Deze link bevat ook het tabletpictogram!

 [genericon icon = tablet] Deze link heeft ook het pictogram van de tablet!