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.
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
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 (lijn icoontjes) 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 gratis icon font, maak je allereerst een nieuw mapje aan (in mijn voorbeeld: ‘fonts’) in de root van je bron codes van het WordPress thema (of andersoortig CMS) dat je gebruikt.
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"; }
#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 gratis 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 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 gratis 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:
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.
Nog Geen Reacties
Sorry, maar het is niet (meer) mogelijk te reageren op dit artikel.