Een lijst met je socialemediakanalen in de footer is een handige optie om je bezoekers de mogelijkheid te geven om door te klikken naar jouw socialemediakanalen. Maar hoe plaats je dit? Maak een widget en zorg dat hier een ongeordende lijst komt met de kanalen die je nodig hebt. Dit ziet er zo uit.
<ul class="social> <li class="facebook" title="Like onze facebook pagina"><a href="https://www.facebook.com/jouwkanaal/" target="_blank" rel="noopener">Like ons op facebook</a></li> <li class="instagram" title="Like onze Instagram pagina"> <a href="https://www.instagram.com/jouwbedrijf/" target="_blank" rel="noopener">Volg ons op instagram</a></li> <li class="linkedin" title="Volg ons via LinkedIn"> <a href="https://nl.linkedin.com/company/jouwbedrijf/" target="_blank" rel="noopener">Volg ons via LinkedIn</a></li> </ul>
Let op de class=”social” die toegevoegd is aan de ul openingstag. Dit doet de truc dus die is belangrijk. Plaats vervolgens de onderstaande code in je stylesheet:
ul.social li + li + li::before {
content: '\f167'; /*LinkedIn*/
}
ul.social li + li::before {
content: '\f16d'; /*Instagram*/
}
ul.social li::before {
display: inline-block;
margin: 0 5px 0 0;
font-family: 'Font Awesome 5 Brands';
font-size: 22px;
color: #FFFFFF;
content: '\f09a'; /*Facebook*/
text-align: center;
width: 25px;
float: left;
}
Als je deze code gebruikt krijg je een lijst met drie items naar je sociale media kanalen. Eventueel kun je code voor je iconen wijzigen. Gebruik dan de Font Awesome code die je hier kunt vinden.