[WordPress Tips] Display Icon Menu in WordPress without Plugins – You want to decorate more “Icon” on categories in WordPress to make the interface more professional and beautiful, what to do? If you are using the WordPress source code, there are many Plugins that help you create a very simple and fast Menu Icon. However, you don’t want to use Plugin in WordPress source code, so is there any way to add Icon to Menu in WordPress without using Plugin?
In the previous article about WordPress tips, I also showed you how to create Menu Icon for WordPress using the Menu Icon Plugin, which is very simple and easy to use, but the disadvantage of this method is that it affects the environment. Website speed, continue in this article, I will guide you a method to create “Menu Icon” without having to use Plugin and without affecting the speed in WordPress source code!
Display Icon Menu in WordPress without Plugin
The method I introduce below is to use Font Awesome (Font Awesome is a library that provides hundreds of “Icon”s for Website or Blog.With these “Icon” you can completely customize with CSS from color. colors, effects,… just like a normal character Font Awesome’s advantage is that it doesn’t affect page load speed, it’s free…) . So how to use Font Awesome? Let’s learn how to display Icon Menu in WordPress without using Plugins.
First, go to this link, then select the Icons in the “Web Application Icons” section (if you choose in other “Icon” items, “Icon” may not appear when you insert it into the Menu)
Click on an “Icon” and you will see a new interface appear with a small code provided.
Then copy this code and go back to the WordPress admin page go to Appearance Menu > Click Menu > Then paste this code in front of the “Navigation Label” attribute.
Once done, save it and go to the homepage to check the results. If you feel that “Icon” is too small for the Menu you can increase the Icon size by using the “fa-lg” class, this class will increase 33% from the original default size. Or you can use the classes “fa-2x”, “fa-3x”, “fa-4x”, “fa-5x” to scale up to the class name .
Example using the above parameters to customize the “Icon” size
<i class="fa fa-camera-retro fa-lg"></i> tăng 33% <i class="fa fa-camera-retro fa-2x"></i> tăng gấp 2 <i class="fa fa-camera-retro fa-3x"></i> tăng gấp 3 <i class="fa fa-camera-retro fa-4x"></i> tăng gấp 4 <i class="fa fa-camera-retro fa-5x"></i> tăng gấp 5
Also to customize the “Icon” more you can visit this link to learn how to use the advanced “Icon”.
Maybe after inserting the “Icon” into the Website you will not see it appear, please check the “Icon” you are using is selected correctly in the “Web Application Icons” section or not? If it is correct and still does not appear, you can add the following code in the header.php file in the <head> tag ( if you do not know how to access the header.php file, you can refer to the article on editing the interface ). WordPress plugin without FTP )
You can replace 4.3.0 with the desired version. Visit this link to know the latest version in use (currently as of this writing the version is 4.6.
So I showed you how to add “Menu Icon” without using Plugin in WordPress source code. With this method, the loading speed of the Web page is not affected too great, isn’t it.
Finally, if you find the article useful, please subscribe to my blog regularly to update the latest articles via Email – Thank you!
