Is there any way to use one of Fontello icons as a main menu item?

BR
Pawel

Each menu item has a “class” setting which is not visible by default under “screen options” (Top right corner button in Appearance -> Menus). Make sure to tick “CSS Classes” item.

Now you can add classes to the menu item. Unfortunately you will have to style the classes yourself. E.g.

If you add “icon-globe” class then you will have to add a style:

The value of the content should be exactly the same as in “wp-content/themes/minicorp/assets/html/core/libs/css/fontello.css” for the .icon-globe.

Hope this helps,
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Thanks for your help. It almost worked :)

The icon is there, but it is not possible to create menu item without label and the icon itself is not clickable. Any ideas?

Cheers
Pawel

In this case we recommend you to play a little with the CSS. Currently the icon is placed inside the li:before pseudo-element. You may place it inside the “a” element or so.

E.g. .main-nav li.icon-globe a:before{...}

You might have to apply most of the styles that are in fontello.css to that element as now they are applied to the element that starts with “.icon-” class.

To hide the text label you can use a CSS trick

You could also specify the exact width and font-size, etc..

Another approach would be to hook into the main navigation and add the icons programatically from a child theme via a function like we have added the search functionality (E.g. functions.php line 1770 and function ishyoboy_add_search_form())

Hope this helps,
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

I am afraid that didn’t do the trick – there’s is an empty square instead of the icon now and adding the trick to hide text hides the icon, leaves the text and moves the whole menu down (unless I missunderstood and should put it somewhere else).

I use child theme so I apply all changes to child-theme.css and must add that my CSS/HTML knowledge is basic. I did fine with customizations so far, but those little tricks are just too tricky for me ;)

Cheers

The empty square is because the font is not set to be the fontello one. If you have a look inside the fontello.css you will find:

This sets the font, style, etc.. to the pseudoclass of everything that has a class name starting with “icon-“.

So what you could do is copy it to the element you need. E.g.:

Not sure if this exact code would work but you get the idea. You can add position absolute, top, left, etc..

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

The empty square is because the font is not set to be the fontello one. If you have a look inside the fontello.css you will find:

This sets the font, style, etc.. to the pseudoclass of everything that has a class name starting with “icon-“.

So what you could do is copy it to the element you need. E.g.:

Not sure if this exact code would work but you get the idea. You can add position absolute, top, left, etc..

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market