Selecteer een pagina

Je eigen icon font voor je website of app maken

20/11/2020 | 0 Reacties

Wanneer je een website, app of andere applicatie beheert heb je meestal te maken met iconen. Het beheren van deze iconen kan wat gedoe zijn. In deze post leg ik uit hoe je eenvoudig je iconen kan beheren voor je applicatie met een icon font.

Waarom een icon font?

Een icon font heeft een aantal duidelijke voordelen ten opzichte van losse afbeeldingen:

  • Schaalbaarheid. Omdat een icon font op vectoren gebaseerd is, kan een icoon zo groot of klein gemaakt worden als je maar wil.
  • Controle over de kleur. Een icon font kun je weergeven in elke kleur die je maar wil.
  • 1 request. Of je nu 10 of 100 iconen gebruikt op je pagina, er wordt 1 request gedaan.

Standaard oplossingen

Het web biedt een boel mooie oplossingen voor het gebruik van icon fonts. FontAwesome heeft een gratis en een betaalde versie met een hoop opties voor het icoon. Zo kun je de dikte van de lijn van een icoon selecteren. De premium versie biedt met alle varianten bijna 8000 iconen. En geen zorgen; ze hebben goede oplossingen die ervoor zorgen dat je niet alle 8000 iconen inlaadt. Ook Feather is een veelgebruikte iconen oplossing. Feather is volledig gratis, en biedt 286 iconen.

Maatwerk

De Fontawesome and Feather iconen zijn vrij standaard, veelgebruikte iconen. En het kan goed zijn dat dit precies is wat je zoekt. Maar als je een applicatie beheert die vrij specifieke terminologie gebruikt, dan is de kans aanwezig dat je hier geen icoon voor gaat vinden in de standaard oplossingen.

Bijvoorbeeld: ik heb een app waarin ik voetbalstatistieken bijhoud. FontAwesome biedt een paar iconen van een voetbal aan. Maar wat als ik een icoon wil voor een spits, middenvelder en verdediger? Daarnaast wil ik iconen voor verschillende opstellingen als 4-3-3 en 4-4-2, en wil ik aangeven of een speler een knie, enkel of hamstringblessure heeft. Je kunt je voorstellen dat ik hier al snel zelf de iconen moet ontwerpen.

Mijn eigen custom font

Dus ik, of mijn fantastische design team, heeft een set aan iconen ontworpen. Dit wil ik verwerken in mijn applicatie. Hoe maak ik hier een icon font van? Ik vind het zelf prettig om mijn icon font te beheren bij IcoMoon. Dit geeft je de kans om standaard iconen te selecteren en dit uit te breiden met je eigen ontwerpen.

Wat ik prettig vind aan deze oplossing is dat ik controle heb over hoeveel iconen ik in mijn icon font heb, en hoe ik ze in mijn project moet implementeren. Een stappenplan:

Stap 1: Iconen uploaden
Mijn iconen upload ik in icoMoon. Ik heb eenvoudig een vierkant, driehoek en cirkel gemaakt. Hierna selecteer je simpelweg de iconen die je wil hebben in je icon font.

Stap 2: Je iconen een naam geven
Je iconen kun je een naam geven. Ik houd het voor nu even op triangle, oval en rectangle

Deze namen ga je ook terug zien wanneer je de iconen invoegt. Als je dit in een app of website gebuikt zou de code voor de 3 iconen er zo uit zien:

<span class="icon-oval"></span>
<span class="icon-square"></span>
<span class="icon-triangle"></span>

Stap 3: Opslaan en importeren.
Download je icon font, en importeer dit in je project.
Pro tip: Registreer je en sla je icoMoon project op. Op deze manier kun je makkelijk een nieuw font exporteren als er iconen worden toegevoegd.

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *