Dossier /
HTML/CSS: Hoe maak je social buttons met Font Awesome
Installatie:
Voordat je gebruik kan maken van Font Awesome op je blog moet je het installeren. Ik zal jullie laten zien hoe je dat doet voor de twee meest gebruikte blogplatforms: Blogger en Wordpress.
Blogger:
-
Open je Blogger dashboard en ga naar Sjabloon > HTML bewerken
-
Nu kun je de HTML/CSS bestanden van je blog bewerken. Speur in de code naar de <head> tag (of laat ctrl+F het werk voor je doen ;)
-
Kopieer de onderstaande code naar je klembord:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
-
En plak de code direct achter de <head> tag.
-
Klik op Sjabloon opslaan om je wijzigingen te behouden.
Gefeliciteerd! Je hebt nu succesvol Font Awesome geïnstalleerd op je Blogger blog.
Wordpress:
-
Open je Wordpress admin panel en ga naar Plugins > Nieuwe plugin
-
Zoek naar Font Awesome Icons en klik op Nu installeren
-
Klik op Plugin activeren
En voila Wordpress gebruiker. Ook jij kunt nu gebruik maken van Font Awesome.
Social Media Icons
Alle Font Awesome hebben een code. Neem maar eens een kijkje op de Icon overzicht pagina van Font Awesome. We willen Font Awesome gebruiken voor het maken van Social Media links, daarom zal ik voor nu het bekende Facebook-icoontje gebruiken als voorbeeld. Font Awesome heeft er twee: een simpele letter ‘F’ en een letter ‘F’ in een vierkantje. Wij gaan de eerste gebruiken en dat is deze.
Bij dit icoontje hoort de code: fa-facebook Daarbij hoort de HTML code: <i class=”fa fa-facebook”></i>
Als je die code in je tekst zet, krijg je als resultaat een plaatje. Er moet nog een link aan gekoppeld worden. Daarvoor moeten we de code als volgt uitbreiden: <a href="URL NAAR JE FACEBOOKPAGINA"><i class="fa fa-facebook"></i></a>
Nu hebben we de bouwblokken voor het maken van een mooi social media menu.
Voor de volgende stap moeten Blogger gebruikers klikken naar Indeling > Een gadget toevoegen > HTLM/Java Script
Wordpress gebruikers, jullie moeten gaan naar Weergave > Widgets > en vervolgens een tekst widget toevoegen aan de sidebar.
Kies een titel voor de widget (bijvoorbeeld ‘Social Media Links’) en plaats de volgende code in het tekstveld:
<a href="URL NAAR JE FACEBOOKPAGINA"><i class="fa fa-facebook"></i></a>
*Vervang de dikgedrukte tekst voor de URL naar je facebookpagina.
Sla je wijzigingen op en bewonder het resultaat.
Om links naar andere social media websites toe te voegen hoef je alleen maar de stappen hierboven te herhalen.
Facebook: <a href="URL NAAR JE FACEBOOKPAGINA"><i class="fa fa-facebook"></i></a>
Twitter: <a href="URL NAAR JE TWITTERPAGINA"><i class="fa fa-twitter"></i></a>
Youtube: <a href="URL NAAR JE YOUTUBEPAGINA"><i class="fa fa-youtube-play"></i></a>
Instagram: <a href="URL NAAR JE INSTAGRAMPAGINA"><i class="fa fa-instagram"></i></a>
Enne… niet te vergeten:
Hebban: <a href="URL NAAR JE HEBBANPAGINA"><i class="fa fa-book"></i></a>
Punt van aandacht:
Als je wilt dat je icoontjes onder elkaar komen te staan moet je de code <br> aan het einde van elke regel toevoegen.
Heel veel succes! Vragen zijn welkom in de comments hieronder.
