Gebruikerswaardering: 5 / 5

Ster actiefSter actiefSter actiefSter actiefSter actief
 

Font Awesome in Joomla website

Font Awesome gr

Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

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 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 onderstaande code hier naar toe en dan opslaan en sluiten.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

  maak een artikel aan, geef dit een naam bijvoorbeeld test

  je hebt nu nog een leeg artikel maar dat geeft niet, en dan opslaan en sluiten

  maak een nieuw menu aan en koppel dit aan het artikel wat je net hebt gemaakt

  ga terug naar de backend en open je artikel

  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.

Ga naar de voorkant van je website en open het artikel, nadat je het artikel hebt opgeslagen.

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 op hexkleur voor meer kleurcodes 

  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.

In de meeste templates werkt dit zonder plugin, maar mocht dit niet het geval zijn dan kun je hier de plugin dowloaden

 

Kun je er niet uitkomen.

 

 

 

Wil jij mij ook helpen deze artikelen te delen?
Voor jou één simpele muisklik op deze pagina, voor mij een zeer gewaardeerd cadeautje!

Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn