Fontawesome

Fontawesome is een module waarmee je icoontje of pictogrammen in je website kan brengen zonder dat ze moeten uploaden. Denk maar aan het icoon voor een luchthaven, toilet, brandgevaar, enz...

Fontawesome werkt met een externe library. Je hebt de keuze om deze te installeren in /libraries/fontawesome of je laat hem laden via een CDN.

Deze module biedt een CKEditor-plug-in om gebruikers in staat te stellen direct vanuit de editor Fontawesome-pictogrammen te selecteren, evenals een veld om aan inhoudstypes toe te voegen.

In de instellingen van CKEditor (admin/config/content/formats) moet de plugin aan de actieve toolbar worden toegevoegd. We kiezen hier voor de Full HTML editor.

Toolbaar

Bij het aanmaken van bijvoorbeeld een eenvoudige pagina zet je de instellingen van CKEditor op Full HTML en klik op het Fontawesome icoon.
Er verschijnt een popup met daarin een automatisch aanvullend veld waar je de naam van het pictogram invult. Een lijst met alle beschikbare pictogrammen vind je hier.

Select icon

Selecteer het gewenste pictogram en het verschijnt in de editor.

De broncode ziet er als volgt uit:
Sourcecode
Je voegt als het ware een class in die omzet word naar een pictogram.

 

Je kan kan Fontawesome ook als veld toevoegen in een inhoudstype. Het verschil is dat je het pictogram als apart veld krijgt en dus bruikbaar is in bijvoorbeeld een view.

Fontawesome Field

Ook hier krijg je automatisch aanvullend veld waar de naam van het pictogram dient te worden ingevuld.

Standaard zijn de pictogrammen zwart van kleur en nogal aan de kleine kant, maar met wat css kan zowel de kleur als het formaat worden aangepast.

Bijvoorbeeld:

.fa-accessible-icon{
   color: red;
   font-size: 4em;
}

geeft als resultaat:
fa-accessible-icon