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