Om iconen aan websites toe te voegen wordt tegenwoordig vaak gebruik gemaakt van iconen lettertypes. Het werken met iconen lettertypes heeft namelijk als voordeel dat je de iconen eenvoudig op elk gewenst formaat kunt tonen. Voor responsive websites waarbij de iconen op een klein apparaat kleiner moeten zijn als op een desktop computer is dit erg handig.
Het responsive framework Bootstrap, waar tegenwoordig veel websites mee worden opgebouwd, is uitgerust met een deel van het GLYPHICONS lettertype. Gebruikers van Bootstrap kunnen daarmee gebruik maken van 250+ veel gebruikte iconen. De set bestaat voornamelijk uit iconen die veel gebruikt worden in webapplicaties.
Helaas onderbreken in de Bootstrap GLYPHICONS set ook nog wel een aantal iconen die we toch wel regelmatig gebruiken. Daarom maken we in veel WordPress thema’s ook gebruik van Font Awesome. De Font Awesome set bevat 500+ iconen met onder meer iconen voor bekende social media merken zoals Twitter, Facebook, Google+ en Pinterest.
Bower en WordPress
Bootstrap en Font Awesome zijn op verschillende manieren te integreren binnen een WordPress thema. Wij maken hiervoor echter gebruik van de web package manager tool Bower. Met Bower kun je eenvoudig bijhouden welke bibliotheken en versies je gebruikt in je webproject. In een JSON-bestand kunnen we definiëren welke bibliotheken een WordPress thema nodig heeft.
bower.json
{
"name": "pronamic-3",
"version": "1.0.0",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.3",
"fontawesome": "~4.3.0"
}
}
Met de commando bower install kunnen we vervolgens eenvoudig Bootstrap en Font Awesome installeren binnen het WordPress thema. Met behulp van Grunt en de wp_enqueue_script() en wp_enqueue_style() functies kunnen we vervolgens deze bibliotheken ook daadwerkelijk inladen in een WordPress thema.
Sass en WordPress
Doordat we in veel WordPress thema’s gebruik maken van Sass is het heel eenvoudig om te werken met Font Awesome. Een element uitbreiden met een Font Awesome icoon is daarmee zeer eenvoudig. In het Sass bestand van het WordPress thema kunnen we eenvoudig enkele Bootstrap en Font Awesome Sass bestanden invoegen.
style.scss
// Bootstrap @import "/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables"; // Font Awesome @import "/bower_components/fontawesome/scss/mixins"; @import "/bower_components/fontawesome/scss/variables";
Door de Bootstrap en Font Awesome variables en mixins in te laden in ons eigen Sass bestand kunnen we deze ook in ons eigen project gebruiken.
Icoon toevoegen in WordPress
Als we vervolgens een element willen uitbreiden met een Font Awesome icoon kan dat met behulp van de volgende Sass definitie:
/**
* Element with arrow
*/
.prefix-with-arrow:after {
@include fa-icon();
content: $fa-var-angle-right;
margin-left: 10px;
}
De @include fa-icon() is een Font Awesome mixin die de nodige Font Awesome declaraties toevoegt. En met de content: $fa-var-angle-right; declaratie geven we aan dat de angle right icoon gebruikt moet worden. In de broncode is een overzicht van alle Font Awesome variabelen terug te vinden. Wij vinden dit zelf erg fijn werken en wellicht inspireert het andere ontwikkelaars. Ik ben benieuwd hoe andere ontwikkelaars Bootstrap en Font Awesome gebruiken in WordPress thema’s. Laat daarom gerust een reactie achter of volg ons op Twitter of Facebook.