Als webdesigner heb ik al vaker de vraag gehad of ik een paar (sociale media) icoontjes kan toevoegen aan een site. Een aantal jaar geleden nog was de standaard oplossing om gebruik te maken van rasterafbeeldingen (zoals JPG, PNG en GIF) voor het tonen van een icoontje.

Maar rasterafbeeldingen kunnen erg groot worden als het gaat om de bestandsgrootte, wat uiteraard nadelig is voor de laadtijd van een website. Maar ook in tijden van Retina of High-Density beeldschermen is het — juist bij icoontjes — van belang dat deze haarscherp worden weergegeven op dit soort beeldschermen.

Gelukkig is er al een tijdje een goede en praktische oplossing hiervoor .. Icon fonts! Een Icon font is een set pictogrammen of icoontjes verpakt in een lettertype (in diverse web formaten) dat later kan worden ingelezen op een website middels @font-face, een techniek die het mogelijk maakt om in CSS3 ondersteunende browsers lettertypes toe te voegen.

Voor meer informatie over icon fonts (icoon lettertype), verwijs ik je graag naar een eerder geschreven artikel: De Voor- en Nadelen van Icon Fonts.

Zes maanden geleden heb ik een nieuw icon font gebakken, puur en alleen bedoeld voor persoonlijk gebruik op deze website en mijn online portfolio. Via meerdere (sociale media) kanalen heb ik al vaker de vraag gekregen of ik dit icon font misschien openbaar zou willen maken .. dus, bij deze!

gonzocons 2.0, een gratis lettertype met 100 line icons

gonzocons 2.0 - Free Line Icon Set

Demo    Download

Het originele gonzocons 2.0 Icoon Lettertype bevat nog een aantal icoontjes — o.a. de icoontjes die ik gebruik voor het weergeven van mijn diensten — welke ik heb weggelaten in deze gratis uitvoering. Deze line icons zijn gemaakt in Adobe Illustrator en als .SVG files geïmporteerd in Icomoon.

Dit icon font bevat 100 aparte line icons. In deze icoon set komen de meest voorkomende icoontjes voor zoals o.a. navigatie icoontjes, bestandstype icoontjes, functie icoontjes, sociale media icoontjes, etc.

In de download file (gonzocons.zip) vind je o.a. het icon font in diverse web formaten (.ttf, .eot, .svg en .woff) bestemd voor de verschillende browsers, maar ook de codes voor de demo pagina en alle losse .SVG bestanden.

In het vervolg van dit artikel zal ik toelichten hoe jij dit gonzocons 2.0 icon font makkelijk aan jouw website kunt toevoegen.

Het installeren van het Icon Font

Om gebruik te willen maken van dit icon font zul je allereerst een nieuw mapje moeten aanmaken (in mijn voorbeeld: ‘fonts’) in de root van je bron codes van het WordPress thema (of andersoortig CMS) dat je gebruikt.

Voeg een folder 'Fonts' in root WordPress Theme
Maak een een folder ‘fonts’ aan in de root van je WordPress Theme.

In het mapje ‘fonts’ plaats je de diverse web formaten (.ttf, .eot, .svg en .woff) van het icon font, zodat de @font-face declaratie in de CSS file van jouw WordPress Theme (naar alle waarschijnlijkheid de ‘style.css’ file in de root van je thema) naar de juiste map kan verwijzen voor het downloaden van het gewenste icon font web formaat.

/* =========== ICON FONT GONZOCONS 2.0 =========== */
@font-face {
    font-family: 'gonzocons';
    src:    url('fonts/gonzocons.eot');
    src:    url('fonts/gonzocons.eot#iefix') format('embedded-opentype'),
        url('fonts/gonzocons.ttf') format('truetype'),
        url('fonts/gonzocons.woff') format('woff'),
        url('fonts/gonzocons.svg#gonzocons') format('svg');
    font-weight: normal;
    font-style: normal;
}

Verder is het ook wenselijk om in ieder geval een aantal standaard CSS eigenschappen aan te maken voor alle icoontjes die direct in de HTML worden ingesloten. Dit wordt gedaan in de styles.css file middels de stijldeclaratie [class^="icon-"], [class*=" icon-"] welke betrekking heeft op elk icon-naam_icoon element in de HTML codes.

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'gonzocons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Verder moeten ook alle losse icoontjes daarna worden gedefinieerd door een specifieke HTML unicode middels de CSS content eigenschap. De content eigenschap wordt vaak samen gebruikt met de pseudo-elementen :before en :after om gegenereerde content voor of achter een HTML element toe te voegen.

.icon-antenna:before { content: "\e900"; }
.icon-archive:before { content: "\e901"; }
.icon-arrow-down:before { content: "\e902"; }
.icon-arrow-left:before { content: "\e903"; }
...
.icon-vimeo:before { content: "\e969"; }
.icon-wordpress:before { content: "\e96a"; }
De juiste codes om aan jouw style.css file (in de root van je WordPress thema) toe te voegen, vind je terug in de gonzocons.css file uit de download.zip

Een Icoon insluiten in HTML

Door onderstaande code toe te voegen aan HTML elementen, zoals bijv. bij de tekst voor een <button> kun je elke icon laten zien bij het desbetreffend element. De code van de iconen kun je overal op je website gebruiken. Zo kun je ze ook in de bron codes van je WordPress thema plaatsen, maar ook in je artikelen en pagina’s.

Als je deze icoontjes ook in je eigen geschreven teksten (van artikelen of pagina’s) wilt gebruiken, let er dan wel op dat je de ingesloten HTML code in een ‘eigen HTML’ block plaats via de Gutenberg editor. Als je de ingesloten HTML code namelijk in de visuele editor plakt, zul je op de website alleen de code zien en niet het icoon zelf.

Voorbeeld voor het icoon ‘icon right’ (met daaronder de desbetreffende code):

<span aria-hidden="true" data-icon="icon-right" class="icon-right example-icon"></span>

Het stylen van een ingesloten Icoon

Bovenstaand icoon uit het voorbeeld krijgt nog een 2de classname example-icon mee om dit icoon een specifieke styling te kunnen meegeven in CSS. In onderstaande code zie je hoe de grootte, kleur en uitlijning gedefinieerd worden in CSS:

.example-icon { 
    font-size: 20px; 
    color: #ed9121; /* Orange */
    margin: 0 8px 0 0; 
    vertical-align: -4px; 
}

Een Icoon insluiten in CSS middels pseudo-elementen

In onderstaande code voorbeeld zie je hoe je een icoontje als gegenereerde inhoud voor of achter een HTML element kunt toevoegen, dit wordt vaak toegepast als je middels de visual text editor in WordPress bijv. een standaard opmaak element (zoals bijv. een <blockquote>) toch nog kunt stylen.

blockquote:before { 
    display: block;
    font-family: "gonzocons";
    content: "\e951"; 
    font-size: 28px;
    font-style: normal;
    color: #FFF;
    margin-right: 6px;
}

Licentie voor het gebruiken van de gonzocons 2.0

Dit gratis (open source) icon font is gelicenseerd en valt onder de ‘Creative Commons Attribution 3.0 Unported License’, dit houdt in dat de gonzocons voor zowel persoonlijk als commercieel gebruik mogen worden gebruikt.

Mocht je dit Icon Font gebruiken op een van je (klanten) sites, dan zou ik dat uiteraard graag willen zien! Maar ook voor eventuele aanpassingen of toevoegingen kun je uiteraard ook contact met gonzodesign opnemen.

Deel dit Bericht:

Categorie: webdesign | Tags: , ,

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.

Artikel Nav