The icon is a great complement to any type of design. Many icons are universally recognized. Take a public toilet signage at the airport. Without the need to know the local language, if it is foreign to you, you can immediately grasp which toilet is for the ladies, and which is for the gents from the icon used at the front of the door.
The same thing could also be applied for a Website; displaying an icon could help the users to navigate through your website. This helps with user experience, and will also make a website look prettier.
But displaying such an icon in a CMS like WordPress could be a challenge. If your website is built on top WordPress, here we will show you the easiest way to show an icon in WordPress menu.
Recommended Reading: How To Use Dashicons In WordPress Theme Or Plugin
Getting Started
Adding an icon in WordPress is made easy with a WordPress plugin called Menu Icons. First, install and activate this plugin.
Now we are ready to add the icons.
Adding Icon
For this example, I would like to use TwentyTwelve, a nice and clean WordPress theme. I also created a few pages that I will include in the menu.
Create a new menu through Appearance > Menus. Don’t forget to assign the menu location, unless it won’t appear anywhere in the website.
Then we will add an icon for each item. To begin, let’s expand one of the menu items. You will find a link that says Icon: Select icon. Click on the “Select icon” to start selecting. Here you will be presented with a window similar to the WordPress media library.
At the time of this writing, this plugin comes with 3 font icon libraries namely Dashicons, Genericons, and FontAwesome.
However, even though we are freely to use any icons, it is better to derive the icons from one library, since each of them has their own traits such as the size and the curve. In other words, if you use FontAwesome, use it throughout the website. Doing so would maintain the the icon consistency and make it look more unified.
When you select the icon, you will see the preview on the right panel. In the right panel make some adjustments. You can place the icon before or after the menu, control the font size, and set the vertical alignment. When the setting is done click on the Select, and proceed to add an icon for the other items in the menu.
Final Thought
Menu Icons is a very handy plugin to add icon in menu. It integrates well with the WordPress UI pattern which it very intuitive to use. In addition, the developer has planned a few new features for the next versions, including adding more icon libraries, and the ability to upload custom icon.
I hope you enjoy and find this tip useful. Go ahead and give the plugin a try.
Related posts:
- How to Use Dashicons in WordPress Theme or Plugin
- 12 Essential Plugins for WordPress Developers
- How to Display “Featured Content” in WordPress
- Display WordPress Widgets Conditionally in Particular Pages
沒有留言:
張貼留言