.
Is it Possible ?
– Yes, like the following Image:
You can add the following Classes in the CSS Classes (optional) field of Menu Items.
fa-lock d5-menu-with-icon d5-menu-no-text
Where fa-lock is a icon name from FontAwesome. You can use your desired Icon; d5-menu-with-icon is mandatory and d5-menu-no-text is optional if you don’t like to use the Anchor Text.
Now, you need to add the following CSS code in the WP-Admin > Appearance > AssociationX Options > General Options > Custom Code within Head Area Box. Please remember that, these should be used once, not every time for new Menu Icon Item.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> /* --- Menu with Icon --- */ #main-menu-con .mainmenu-parent ul li.d5-menu-with-icon { padding: 7px 9px; display: flex; align-items: center; justify-content: center; } #main-menu-con .mainmenu-parent ul li.d5-menu-with-icon::before { color: #ffffff; font-size: 21px; padding: 3px; display: inline-flex; } #main-menu-con .mainmenu-parent ul li.d5-menu-with-icon a { padding: 3px; } #main-menu-con .mainmenu-parent li.d5-menu-no-text a { display: none; } #main-menu-con .mainmenu-parent ul ul li.d5-menu-with-icon { padding: 0; } #main-menu-con .mainmenu-parent ul ul li.d5-menu-with-icon::before { padding: 11px 3px; } #main-menu-con .mainmenu-parent ul ul li.d5-menu-with-icon a { padding: 11px 3px; } #main-menu-con .mainmenu-parent ul ul li.d5-menu-with-icon.d5-menu-no-text { width: 100%; } </style> |
