Icoontjes vóór je menu-items plaatsen

27 sep 2021 | DESIGN TIP

Marloes met laptop blog
Icoontjes in je menu kunnen een leuke toevoeging zijn! Ik laat je zien hoe je dit kunt doen met zowel Divi icoontjes als externe icoontjes van FontAwesome.
divi-icoontjes-voor-menu-items-plaatsen

Stap 1: Ga in je Dashboard naar Weergave > Menu’s en vink CSS-classes aan bij de Schermopties

Rechtsboven in het scherm vind je de Schermopties, deze kun je uitklappen. Vink CSS-classes aan als dit nog niet het geval is.

Stap 2: Vul bij het menu-item waar je je icoontje wil, een CSS-klasse in

De naam van de klasse kun je zelf kiezen. Ik zet bijv. bij Contact de CSS-klasse icoon-contact:

Stap 3: Kies het icoontje dat je wil gebruiken

Je kunt kiezen uit de icoontjes van Elegant Themes (DIVI) en het wat grotere aanbod van de gratis icoontjes van FontAwesome, Klik op de links om de opties te bekijken.

LET OP: Om een FontAwesome icoontje te gebruiken, moet je de plugin van FontAwesome installeren en activeren op je website!

Stap 4: Schrijf de code van je icoontje op

Elegant Themes icoontje

Bij Elegant Themes heb je de icooncode nodig van áchter de x (even op hun pagina naar beneden scrollen voor het overzicht van de icoontjes). In onderstaand voorbeeld met het email-icoon is dat dus e076:

FontAwesome icoontje

Klik op de website van FontAwesome het icoontje aan dat je wilt gebruiken. Linksboven zie je dan de unicode. Deze kan je kopiëren door er op te klikken. In onderstaand voorbeeld is dit dus f786.

Stap 5: Ga naar de Divi Thema Opties > Aangepaste CSS

Voor een icoontje van Elegant Themes plak je daar de volgende code:

/*ICOONTJE VOOR SPECIFIEK MENU-ITEM - DIVI*/
.icoon-contact > a:before {
    font-family: 'ETMODULES';
    content: '\e076'; /*vul hier achter de \ de icooncode (alles na de x)*/
    text-align: center;
    margin-right: 10px; /*afstand rechts van het icoon*/
    margin-left: 0px; /*afstand links van het icoon*/
    color: #fc70bd; /*icoonkleur*/
    font-size: 1em; /*grootte icoon, 1em is volle regelhoogte*/
    transition: all .3s ease;
}

Voor een icoontje van FontAwesome plak je daar de volgende code:

/*ICOONTJE VOOR SPECIFIEK MENU-ITEM - FONTAWESOME*/
.icoon-contact > a:before {
    font-family: 'FontAwesome';
    font-weight: 900;
    content: '\f786'; /*vul hier achter de \ de Unicode van je icoon*/
    text-align: center;
    margin-right: 10px; /*afstand rechts van het icoon*/
    margin-left: 0px; /*afstand links van het icoon*/
    color: #fc70bd; /*icoonkleur*/
    font-size: 1em; /*grootte icoon, 1em is volle regelhoogte*/
    transition: all .3s ease;
}

Stap 6: Pas de CSS code aan naar wens

Let er op dat waar bij mij in de code icoon-contact staat, bij jou ook hetzelfde staat als wat je als CSS klasse bij je menu-item hebt meegegeven!

Bij content vul je achter de \ de icooncode uit Stap 4.

Bij color vul je de gewenste kleurcode voor het icoontje.

Je kunt evt. nog aanpassingen doen aan de margins en de font-size!

Stap 7: Herhaal dit voor verschillende menu-items

Herhaal stap 2 t/m 6 voor elk menu-item waar je een icoontje voor wilt hebben.

Als er voor verschillende menu-items hetzelfde icoontje moet komen, dan kun je ze natuurlijk dezelfde CSS-klasse meegeven 😊.

Zo niet, dan geef je ze dus allemaal een andere CSS-klasse mee en plak je een nieuwe code in je Aangepaste CSS.

Stap 8: Aanvullende CSS voor een hover effect

Als je wil dat het icoontje van kleur verandert als je met je muis over het menu-item gaat, plak dan ook onderstaande CSS code(s) onder Aangepaste CSS en pas de kleurcode(s) aan:

Voor gewone menu-items:

/*KLEUR VAN MENU ICOONTJES BIJ HOVER*/
nav li a:hover:before {
    color: #5575fb !important;
}

Voor menu-items in dropdown menu’s:

/*KLEUR VAN MENU ICOONTJES BIJ HOVER IN DROPDOWNMENU*/
nav li ul li a:hover:before {
    color: #5575fb !important;
}

Dit geldt dan voor álle icoontjes in je menu/dropdownmenu’s, dus je hoeft de code maar 1 keer toe te voegen.

Stap 8: Aanvullende CSS voor de kleur bij een actief menu-item

Als je op je website op de Contact pagina staat, dan is Contact in je menu het actieve menu-item. In DIVI kun je daar aparte Ontwerp-instellingen voor meegeven.

Als je wil dat je icoontje ook van kleur verandert als het menu-item actief is, voeg dan nog de volgende CSS toe aan je Aangepaste CSS en pas de kleurcode aan:

/*KLEUR VAN MENU ICOONTJES BIJ ACTIEVE MENU LINK*/
.current-menu-item > a:before {
    color: #5575fb !important;
}

Dit geldt dan voor álle icoontjes in je menu, dus je hoeft de code maar 1 keer toe te voegen.

Woepwoep en toen had je icoontjes in je menu!

Happy Birthday Reaction GIF

Dat was even een uitgebreidere tutorial, maar nog wel goed te doen toch?? 😃

Laat het me hieronder weten als je vragen of opmerkingen hebt!

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!