Adding icons to your menus

(Or anywhere you want to…:)

Showing how to use Fontawsome and further down Dashicons.

Fontawesome

I am showing one way to add icons to your menu through the use of adding some code to your child theme functions.php file and fontawesome icon CSS to your stylesheet.

Add the following code to your child theme functions.php file (in the root of your child theme):

// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

NB! If you have an error that icons are not showing up correctly then adding the following to your CSS stylesheet:

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

why-do-my-font-awesome-icons-show-up-as-blank-squares

(Use the newest version. Right now it is 4.4.o.)
If your still having problems having squares show up then check fontawesome get started page for the newest maxcdn link, as using an older link can create a grey square instead of the icons you selected.

Next we need to find the menu CSS code. Right click the area you want to know about. I right clicked the home button inside the top menu and selected Inspect Element. The area you clicked with also be highlighted in the HTML and CSS below the web page in the inspect element area.

Inspect Element in your web browser

Notice the menu link names such as menu-item-89 etc.
Moving your cursor over the various menu-items they get highlighted directly on your web page so you can see which number belongs to each link.

We now need to figure out which icons to use. The Fontawesome library of icons has a nice selection to choose from.
As I first needed a home button I did a search on the library page and found it. When you click the icon you will see the following page:

Font Awesome Home Icon

As you see there are 6 different sizes of the Home icon.

Since we are adding the code to our CSS stylesheet we need to add the Unicode which is f015. Clicking the Font Awesome examples page also shows how to use different sizes of the icon and other variations that can be done with the icons.

Find the icons names for your menu and add the unicode.

Here is the CSS that I added:

/* Font Awesome menu icons */
/* Home link */
.menu-item-61 a:before {
 font-family: 'FontAwesome'; /* Be sure to add FontAwesome tag before the content */
 content: "\f015";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
 color: #744504;
}
/* WordPress link */
.menu-item-80 a:before {
 font-family: 'FontAwesome';
 content: "\f19a";
 font-size: 16px;
 color: #fff;
}
/* WordPress submenu --- How to link */
.menu-item-49 a:before {
 font-family: 'FontAwesome';
 content: "\f1c8";
 text-shadow: 1px 1px 1px #000;
 font-size: 18px;
}
/* WordPress submenu --- Security link */
.menu-item-2645 a:before {
 font-family: 'FontAwesome';
 content: "\f21b";
 text-shadow: 1px 1px 1px #000;
 font-size: 18px;
}
/* Macaw link */
.menu-item-89 a:before {
 font-family: 'FontAwesome';
 content: "\f0c8";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
}
/* Blog link */
.menu-item-31 a:before {
 font-family: 'FontAwesome';
 content: "\f016";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
}
/* About link */
.menu-item-27 a:before {
 font-family: 'FontAwesome';
 content: "\f118";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
}
/* Contact Link */
.menu-item-30 a:before {
 font-family: 'FontAwesome';
 content: "\f003";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
}

If you instead of adding the word before add after the icon will show after the menu text.
An interesting trick us to add a new icon on hover.
In addition to the above contact link code add:

/* Contact Link */
.menu-item-30 a:hover:before {
 font-family: 'FontAwesome';
 content: "\f01c";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
}

One can add any CSS to the icon code, as I used font-size to change the size of the icon. Added a text shadow. One can change the color of the icon by using color. As well as add other CSS code.

Menu with Fontawesome icons WordPress

Dashicons

Normally used for the backend and also be used for the frontend.
Add the following code to your functions.php file.

//* Enqueue Dashicons	 	 
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );	 	 
function enqueue_dashicons() {	 	 
 wp_enqueue_style( 'dashicons' );	 	 
}	 	 

Go to https://developer.wordpress.org/resource/dashicons/#admin-plugins. Find an icon you want to use. See the f code below each icon. Add it to your CSS along with the font-family. Here is an example.
The CSS:

/* Home link */	 	 
.menu-item-61 a:before {	 	 
 font-family: 'dashicons';	 	 
 content: "\f106";	 	 
 font-size: 16px;	 	 
 color: #fff;	 	 
 padding-right: 3px;	 	 
}

Styling tips

Using a:before adds the icon before the menu title.
Using a:after adds the icon after the menu title.

One can add a hover effect to the icon by adding the word hover:
a:hover:before or a:hover:after.
An example:

/* Contact Link with icon*/
.menu-item-30 a:before {
 font-family: 'FontAwesome';
 content: "\f01c";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
 cursor: pointer; /* Moving the mouse over the icon it also needs to add as a link. */
}

/* Hovering over the contact link changes to another icon. */
.menu-item-30 a:hover:before {
 font-family: 'FontAwesome';
 content: "\f003";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
 cursor: pointer;<
}

How to style a send button

Using icons on a button and animating the icons using CSS. (an example using Ninja Forms but one can transfer the tutorial to any button with a link).

I received a request to create the following with Ninja Forms:
https://codepen.io/daviddarnes/pen/VLXxMa

I made a variation of the above showing a change of icon on hover and how to animate it using CSS.

Send button including an icon.

Hovering over the Send button shows a stronger and different icon.

Here is the code that I am using:

/* I had to make the area around the submit button smaller */
#nf_submit_1 {
 width: 175px;
}

/* The Submit button id - on the line where it says input type */
#ninja_forms_field_5 {
 background-color: #8d5303;
 border: 1px solid #333;
 border-radius: 8px;
 text-shadow: 2px 1px 3px #000;
 box-shadow: 0px 3px 5px #444;
 width: 167px;
 padding-right: 30px;
}

/* The submit button id - hover - mouse over effect */
#ninja_forms_field_5:hover{
 border: 1px solid #ccc;
 text-shadow: 0px 0px 2px #fff;
 box-shadow: 1px 1px 2px #ccc;
 border-radius: 8px;
 width: 167px;
 padding-right: 30px; 
}

/*-------- Animating the icon using https://www.jeremycookson.com/top-10-css-hover-effects/ --------*/

/* One step up to the div id surrounding the submit button named nf_submit_1*/
#nf_submit_1:after{
 font-family: 'FontAwesome';
 content: "\f0e0";
 margin-left: -40px;
 cursor: pointer;
 
 -webkit-transition:opacity .7s ease-out;
 -moz-transition:opacity .7s ease-out;
 -ms-transition:opacity .7s ease-out;
 -o-transition:opacity .7s ease-out;
 transition:opacity .7s ease-out;
 opacity:0.2;
}

/* Mouse over effect */
#nf_submit_1:hover:after{
 font-family: 'FontAwesome';
 content: "\f003";
 margin-left: -40px;
 cursor: pointer;
opacity:1;
}

Resources:

https://wpdecoder.com/customizations/font-awesome

https://www.sitepoint.com/using-font-awesome-with-wordpress/
https://sridharkatakam.com/using-font-awesome-wordpress/
https://premium.wpmudev.org/blog/wordpress-custom-menu-icons/
https://premium.wpmudev.org/blog/add-icons-wordpress-menus/
https://wpspeak.com/load-font-awesome-icon-font/
https://css-tricks.com/five-use-cases-for-icon-fonts/

https://www.wpsuperstars.net/how-to-use-dashicons/

https://jameskoster.co.uk/work/using-wordpress-3-8s-dashicons-theme-plugin/

Plugins:

https://wordpress.org/plugins/svg-vector-icon-plugin
https://wordpress.org/plugins/menu-icons/