custom icons in menu

Posted in: Newspaper
Post count: 60
The Irish Place
#208190
Dec 22, 2017 at 8:30 am

I created my own icon font using .svg icons and http://www.icomoon.io to create the font set.

It gave me a font folder to upload to the root directory and the css below.

I want to use these custom icons as menu icons like the font awesome functionality. However I cannot get them to display when entering the class ID in the Menus WP dashboard.

Any idea how to get this right?….

https://pastebin.com/K7K6UKwe

  • This topic was modified 8 years by Bogdan B..
Post count: 22421
Bogdan B.
#208268
Dec 22, 2017 at 1:21 pm

Hello,
Please make the implementation and then provide a link to your site so I can inspect the code and see why the css does not apply.
Thanks.

Post count: 60
The Irish Place
#208320
Dec 22, 2017 at 5:49 pm

Ok, I have add the class to 3 of the menu items to demonstrate what happens.

It displaces the menu text and the icon does not appear… just a square box in its place. The alignment is messed up. Also it seems to have effect the menu texts font-weight.

I implemented it on 3 menu items:
Home, Heritage and Events.

https://www.theirishplace.com

Post count: 60
The Irish Place
#208334
Dec 22, 2017 at 6:53 pm

please note that when I added the class the font of that particular sub-menu got changed to ‘serif’ and the font of the other sub-menus is ‘open sans’ …..even though I have set them all to Raleway (only the top level font is displaying as Raleway) – I cannot not workout why.

Post count: 20688
Simion C.
#208527
Dec 27, 2017 at 9:15 am

Hi,

I found some tutorials that could be useful to you
– https://code.tutsplus.com/tutorials/the-beginners-guide-to-icon-fonts-in-wordpress–wp-35338
– http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/
– http://www.wpbeginner.com/wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/
Also it seems the font is not loaded properly, maybe check the topics provided above and make sure everything is set right
– https://www.screencast.com/t/YDeW5KPQkYp

Thanks

Post count: 60
The Irish Place
#208831
Dec 28, 2017 at 9:55 pm

Hey.. I got the font set to load… it was a file referencing issue to the fonts folder.

But I am still having an issue with alignment and the iconfont effecting the font weight of the menu text.

Thanks,
Killian

Post count: 20688
Simion C.
#208895
Dec 29, 2017 at 10:34 am

Hi,

Try this code – https://www.screencast.com/t/HYpfRhfW60M

.td-header-main-menu .td-menu-item:before {
position:relative;
top:25px;
right:10px;
}
.td-header-main-menu .td-menu-item {
margin-left: 10px;
}
.td-header-main-menu .sf-menu > li > a {
line-height: 38px;
}

Thanks

Post count: 60
The Irish Place
#208965
Dec 29, 2017 at 7:35 pm

Amazing, Thanks!

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.