Blog Post: Using Icons in Navigation

Red Deer & Blackfalds Web Design Writes:

As Web Design and Development progresses, both junior and senior developers are trying to find efficient ways to add increased functionality to a website without adding hours and hours of additional work. As well, for designers, they are looking for neat ways to make your site look interesting and fun while adding simple custom visual elements that don’t take away from the overall UX (User Experience).

Alas! A solution to both problems can be found using this simple bit of code to add custom icons to your existing navigation. This is a simple and fun way to appeal to a new generation of web users that, because of developments in mobile applications, are more accustomed to the look and feel of icons as opposed to just general text.

Before reading on, make sure you visit my article on Adding Custom Fonts To Your Website, as well as visit the ET Modules Download Page to pick up the appropriate font-files.

After placing, sourcing and activating your new font appropriately, you are ready to make it live on your website. This can be done by adding the following CSS:

/*—–CUSTOM MENU ITEMS WITH ICON—–*/

/* Adding icon to get a quote section */
#top-menu li.get-a-quote a:after {font-family: ‘ETmodules’; content: ‘ \76’;}

/* Border around get a quote button */
#top-menu li.get-a-quote a {border: 1px solid #085e81; }

/* Hover effect on get a quote button */
#top-menu li.get-a-quote a:hover {border-color: white; color: white !important; background: #09b4b6 !important; opacity: 1;}

Note: You can use alternate icons inside of your navigation by referencing the “content: ”;” with a different item inside the single quotations. For a list of additional icons you can Visit the List of ET Modules Icons and reference them appropriately in replacement for the example listed. As well, it should be noted that the previous CSS listed contains additional code for adding a border and custom hover effect on that individual menu-item. In order to add the same padding/margins be sure to use the additional CSS below inside of your WordPress Development

/*—–CUSTOM STYLING FOR MENU ITEMS—–*/

/* Changing padding on menu items */
#top-menu-nav li a {padding: 8px 8px !important; border-radius: 5px;}

/* Custom hover on menu items */
#top-menu-nav li a:hover {background: rgba(1,1,1,0.11); opacity: 1; color: #09b4b6 !important;}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)