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 u 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. Maar 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 u 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 u dit gonzocons 2.0 icon font makkelijk aan uw website kunt toevoegen.

Het installeren van het Icon Font

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

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

In het mapje ‘fonts’ plaatst u de diverse web formaten (.ttf, .eot, .svg en .woff) van het icon font, zodat de @font-face declaratie in de CSS file van uw WordPress Theme (naar alle waarschijnlijkheid de ‘style.css’ file in de root van uw 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 uw style.css file (in de root van uw WordPress thema) toe te voegen, vind u 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> kunt u elke icoon laten zien bij het desbetreffend element. De code van de iconen kunt u overal op uw website gebruiken. Zo kunt u ze ook in de bron codes van uw WordPress thema plaatsen, maar ook in uw artikelen en pagina’s.

Voorbeeld:

<span aria-hidden="true" data-icon="icon-right" class="icon-right example-icon"></span>
Als u deze icoontjes ook in uw eigen geschreven teksten (van artikelen of pagina’s) wilt gebruiken, let er dan wel op dat u de ingesloten HTML code in de ’tekst’ editor modus erin plaatst. Als u de ingesloten HTML code namelijk in de visuele editor plakt, zult u op de website alleen de code zien en niet het icoon zelf.

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 ziet u 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 ziet u hoe u een icoontje als gegenereerde inhoud voor of achter een HTML element kunt toevoegen, dit wordt vaak toegepast als u 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 u dit Icon Font gebruiken op een van uw (klanten) sites, dan zou ik dat uiteraard graag willen zien! Maar ook voor eventuele aanpassingen of toevoegingen kunt u 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 User Experience (UX), Responsive Web Design (RWD) en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij streeft naar merkconsistentie in het hele ontwerp.

Artikel Nav