Aleš Sýkora wrote

Add icon to the menu with custom SVG

2. 4. 2021 in

If you need to add icon to the menu item in WordPress you can find many tutorials using fontawesome, plugins or other icon packs embedded from other sites.

For my purposes – loading of more external scripts is not good solution. So when I need to add my custom icon to the menu I do this.

  1. Add “empty” menu item with   trick (if you add menu item without text, it gets deleted).
  2. Add CSS class to menu item

3. Upload icon to the media library
4. Add custom CSS and change the background URL to your SVG icon

.home-icon-menu {
background-image: url('https://beta.hotelresortrelax.cz/wp-content/uploads/home-solid.svg');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
  width:16px;
  height:16px;
}

5. Edit the CSS if you need :-).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Shortcode to display word count or reading time
1. 7. 2019 in
This shortcode "word-count" will display a count of words for whatever content is passed, and can optionally display an estimated reading time.
Read More
Aleš Sýkora wrote
Particles.js in Oxygen Builder
Particles.js is a lightweight JavaScript library for creating particles. Particles are used to create interactive backgrounds that respond to the mouse movements. Do you want to use it on you Oxygen website? Okay, no problem. You just need to embed the particles.js script – I will do that with the Advanced scripts plugin – and […]
Read More
Aleš Sýkora wrote
ACF Masonry Left to right ordered Gallery in Oxygen Builder /w Colcade
Would you like to use ACF masonry gallery with left to right flow of images? Good, let’s do that! But at first, why not to use standard Gallery module in Oxygen Builder? The problem with Oxygen Masonry gallery The main problem is ordering of images. Standard masonry layout is made by Flexbox columns. So Your […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram