As the saying goes, there are many ways to skin a cat. There are also many ways to add icons to the GeneratePress menu (well, a few at least) but my way of doing it is possibly the easiest. Setting the icons up isn’t complicated and even a GeneratePress novice should be able to follow this guide.
This guide will be using a GeneratePress Block Element (you need GP Premium for that) and GenerateBlocks, so make sure you have both installed before continuing.
Enabling GeneratePress Elements
To start off, you are going to have to enable Elements inside the GeneratePress Premium settings. To do so, navigate to GeneratePress, which is located under the Appearance setting. Enable the ‘Elements’ module if you haven’t done so yet.
Creating a GeneratePress Block Element
Ever since GeneratePress introduced the Block Element, I have been using them wherever possible. So it should come as no surprise, that I will be using one for this guide. And the blocks I’m using are nonothers than those provided by GenerateBlocks. Simply click on the Elements option in the Appearance menu and add a new Block Element to get started.
Adding icons using GenerateBlocks Buttons
Next, you can start creating the icons for your GeneratePress menu. I simply added a Buttons block, selected an icon, and removed the text. You can add as many icons as you want. Just keep in mind, that these icons will also be displayed in the mobile header. You might have to change the spacing and size of the icons for mobile devices to make them all nicely fit.
Placing the GeneratePress Block Element
With the icons created you can move on to placing them on your website. This will be done using the GeneratePress hook generate_menu_bar_items. This hook is quite new and was one of the more interesting additions to GeneratePress Version 3.
Under Location, you can decide on which pages or articles you want the icon in the GeneratePress menu to show up. You could only have it displayed on the front-page or on certain articles. Using the exclusions, you can also hide the icons on certain pages. In this example, I went for the entire site.
GenerateBlocks icons in the GeneratePress menu
And just like that, you have placed an icon in the GeneratePress menu. The use of a Block Element does make it an effortless thing to do. In the example below, the buttons block would still need some work to be done. You could also set the background of the icon to be transparent to make the icon appear as part of the menu.
