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
Oxygen Front-end styles in Gutenberg
WARNING: I can’t figure how to make it working currently. If you have any idea, please put in in the comments below. You may want to display the content when editing in Gutenberg editor with your frontend Oxygen Styles included. It is possible with But the challenge is that Oxygen is creating CSS files for […]
Read More
Aleš Sýkora wrote
Conditional check if page is parent or child in WordPress
14. 1. 2021 in
If you need to display something only if post has childs (or not), you can use this conditional in your code.
Read More
Aleš Sýkora wrote
Redirect non logged users to login page
Situation: Website with pages restricted only to logged in users and we do not use toolset content templates but Oxygen Builder. We are hiding the content to the non-logged in users with Oxygen conditionals but we would like to redirect user to the login page instead of displaying login form on every restricted page. Code […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram