Handleidingen Vormgeving - Design

voor Joomla 3

Externe links automatisch met font awesome icon voorzien in Joomla 3

In deze handleiding laat ik je zien hoe je met een stukje CSS code, automatisch binnen alle artikelen, een Font Awesome icoon laat zien bij externe links. 

Je kunt in elk artikel een code toevoegen voor externe links via een stuk je Font Awsome code.

<i class="fa fa-external-link" aria-hidden="true"></i>

Daarmee weten bezoekers dat er een nieuw venster geopend wordt als ze op een externe link klikken (een link die verwijst naar een andere website). Dit kan ook eenvoudiger via een stuk je CSS code die je kunt toevoegen aan je custom.css. Ik heb hiervoor een stukje CSS code gevonden op Github.

Voorbereiding download CSS code

  1. Je kunt de code downloaden via deze link op GitHub: https://gist.github.com/01-Scripts/3010527
  2. Klik dan op de knop Download ZIP
  3. Het bestand wordt gedownoad naar je PC.

Aanpassen CSS code

  1. Pak het Zip bestand uit.
  2. Open het bestand fa-icon-external-links.css met de CSS code in bijvoorbeeld Brackets (gratis).
  3. Pas dan dit stukje code aan naar je eigen domein

    a[href^="http://own-domain.com"]:after,


  4. Vervang dus deze tekst met je eigen domein: http://own-domain.com
  5. Selecteer daarna alle code
  6. Kopieer de code dan naar de custom.css bestand, of hernoem dit bestand van fa-icon-external-links.css naar custom.css.
  7. Upload het custom.css bestand naar de CSS folder van je template.
  8. Bekijk het resultaat op je website! Vergeet niet om de chache te legen.
    Klik hiervoor in het menu op Systeem, Cache legen.

 

Terug naar het overzicht    Terug naar categorie Vormgeving - Design

 

Delen op social media?

Nieuwsbrief

Schakel javascript in om dit formulier in te dienen

We use cookies

Wij gebruiken cookies op onze web site. Sommigen zijn essentieel voor het correct functioneren van de site, terwijl anderen ons helpen om de site en gebruikerservaring te verbeteren (tracking cookies). U kan zelf kiezen of u deze cookies wil toestaan of niet. Let op dat als u onze cookies weigert mogelijk niet alle functies van de site beschikbaar zijn.