Font Awesome in Joomla website

Font Awesome gr

Je bent ze vast wel eens tegengekomen op een website, van die leuke icoontje zoals in de foto boven dit artikel. Wil je graag ook van die mooie icoontjes in je website? Wil jij er jouw website ook mooi mee aankleden? Dit zijn de Font Awesome icoontjes die je van de website Font Awesome kunt halen.

Je komt ze op steeds meer websites tegen deze kun je gebruiken om:

  opsommingen in een artikel te voorzien van een groen vinkje

  je adres gegevens in je footer mee aan te kleden

  zo'n huisje gebruiken voor je adres bijvoorbeeld

  en voor je telefoon een telefoontje

Dit zijn enkele voorbeelden maar deze iconen zijn op vele plaatsen in te zetten om je website te verfraaien.

Nu wil je een groen vinkje gaan gebruiken bij een opsomming in je website, maar weet niet hoe je dit moet doen.

Op diverse website gezocht hoe je dit moet doen, maar niet kunnen vinden hoe dit nu werkt.

Je hebt het al geprobeerd met een kleine afbeelding maar dit is niet wat je zoekt.

Ik heb hier de oplossing voor om die leuke iconen te plaatsen in jouw website.

Je gaat als volgt te werk.

In dit voorbeeld gebruik ik het template Protostar waar dit niet in zit, maar dat is gemakkelijk op te lossen met de code van Font Awesome.

Ga naar https://fontawesome.com/start om de starterskit te gebruiken, vul hierbij je mailadres in om de code te ontvangen.

Ga naar de template die je gebruikt, in dit geval protostar, zoek in de index.php naar de afsluitende headtag. ( /head ) ga hier voor staan en druk op enter, kopieer (ctrl-C) en plak (ctrl-V) de code hier naar toe en dan opslaan en sluiten.

In de template van Astroid zit deze er al in en kun je deze gebruiken zonder je in te schrijven bij Fontawesome.

Dit is een script wat de Fontawesome icoontje aanroept van de fontawesome website, voor het gratis gebruik kun je alleen de gratis iconen gebruiken en niet de Pro uitvoeringen, de keuze voor de gratis icoontje is ook heel groot.

Om te testen of dit in jouw template werkt kun je dit testen op de volgend manier:

maak een menu aan van het type individueel artikel, op het moment dat je een artikel kunt selecteren kun je op maken klikken om een nieuwe artikel aan te maken
zet je tekstverwerker op code, met de JCE tekstverwerker kun je dit doen door op code te klikken rechtsbovenaan
plaats onderstaande code in je artikel door middel van kopieren(ctrl-C) en plakken (ctrl-V)

<p><span style="font-size: 14pt;"><span style="color: #339966;"><em class="fa fa-check fa-1x"></em>&nbsp; </span> jouw tekst</span></p>

Bij de tekst ''jouw tekst'' kun je dus je eigen tekst neerzetten die dan wordt voorzien van een groen vinkje.
Klik nu op opslaan en en sluiten.

Ga naar de voorkant van je website en klik op het net aangemaakte menu, het net aangemaakte artikel zal nu openen.
Nu is het groene vinkje zichtbaar in het artikel, let op het is niet zichtbaar in je artikel wat je bewerkt aan de backend.

Uitleg van de code die bepaalt welk icoon wordt weergeven:

<p><span style="font-size: 14pt;"><span style="color: #339966;"><em class="fa fa-check fa-1x"></em>&nbsp; </span> zet hier je tekst neer</span></p>

de afmetingen van de font is 14pt, aanpasbaar naar eigen keuze

de kleur van het vinkje is #339966 de kleur groen, kijk voor meer kleurcodes bij het Adobe kleurwiel.

fa fa-check fa-1x is de code voor het vinkje

De afmetingen van het vinkje wordt bepaalt door de fa-1x, die kun je groter maken door van de 1 een 2 of 3 te maken

Als je andere iconen wil gebruiken in je website kun je kijken bij Font Awesome.

Klik op het icoon wat je wil gebruiken en kopieer de code die er bij staat, deze code kun je dan gebruiken in jouw website.

Kun je er niet uitkomen neem dan vrijblijvend contact op.

 Joomla Webdesign Dussen
 Bredeweer 1
 4271 CJ Dussen
 06 - 10 72 15 64