Add the Divi icons to your Divi websites primary menu

Add the Divi icons to your Divi websites primary menu

 

 

add the Divi icons to your Divi websiteHow to add the Divi icons to your Divi websites primary menu. Divi is an absolutely awesome WordPress theme, and it includes some great in-built icons. However, it’s not obvious at first how to use these icons, other than in the modules that they’re included in such as blurbs etc…. So we put together this little video to show you how you can use them just about anywhere. In this video we going to put them in the primary menu, but, using the same method you can put them just about anywhere you need them on your website.

The first thing we’re going to do he’s inspecting HTML of an icon that we have inserted into a module, such as a blurb. Copy the HTML code and paste into a notepad. The next step is to create a new menu using the appearance and menus tab. We then use the custom link tab, and paste or HTML code from the icon into it.

We repeat this process for every different icon and new menu icon that we need. Once we have all the icons that we need, all that is left is to style our new icons with some custom CSS code. We take you through the whole process of styling the icons by using the Google Chrome inspector tab to try out our new code before pasting it into the custom CSS tab. As it is nondestructive, any changes you make to a site while in the Google inspector tab, will revert back once you refresh the browser tab. So there’s no need to worry about messing up your website as you are the only one that is seeing these changes.

add the Divi icons to your Divi websiteThe Chrome inspector tab is a really useful tool that I use all the time. It can be used on any site whether it’s WordPress, Joomla, bootstrap, or plain HTML, to try out any new CSS styles that you might need for your website. It also is a great tool if you see something that you like on someone else’s website, using this tool most of the time you can see exactly how they styled their site.

Once we have styled our icons correctly, and they are displaying as we want them to, we will then add some text underneath using a heading and some paragraph text. You are then able to add any link you desire to the text and or icon that will take your website user to the location desired.

It may be necessary to add some extra CSS code Media queries to make everything display correctly on different device sizes. This is very easy to do. See this article

We now have a primary nav bar that is made up of the inbuilt icons included with the Divi theme. This is a great feature that will extend the usefulness of the awesome Divi theme.

 

add the Divi icons to your Divi website

Leave a Reply

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

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest

Share This