The navigation bar of the WordPress website is usually a single text. For example, the navigation bar and directory of many topics are bare and ugly. If you can add Fontawesome icon If properly decorated, it will become lively and interesting. If you can place it properly WordPress navigation bar icon It will make the whole website more beautiful.
Add fontawesome icon to website text
Our commonly used icon website is: fontawesome Chinese, which provides hundreds of different icons for free selection. Many Wordpress themes support the fontawesome icon by default, such as the Dux theme this is it. The Avada theme is also the default support icon, which can be found in How to add icon icon of Avada theme navigation menu It has been shared.
Next, Lao Wei will take Weieis' notes as an example to explain how to add icons in the dux theme navigation bar.
1. Log in to Wordpress Background>Appearance>Menu. First, create a menu by creating a new navigation menu. For example, you can first consider what content, categories, columns, topics, etc. you plan to put in the website navigation bar, then add them first, and then drag them into the navigation menu as shown in the following figure.
2. As shown in the figure below, you can drag content from pages, articles, user-defined links, classified directories, formats, and topics to the right to form a menu. Please move to WordPress Menu Setup Tutorial 。
Wordpress add menu
3. Click a navigation column randomly (the lower triangle arrow in the figure below), and you will see the code of Navigation Label as shown in the figure below:
Wordpress menu navigation label code
Lao Wei posted this code and explained it:
<i class=”fa fa-pencil” aria-hidden=”true”></i> Avada
The icon code wrapped with<i></i>label above is copied from fontawesome, and the Avada behind is the name of navigation directory.
4. Find your favorite icon from the icon library on the fontawesome website, and click to enter the icon details page, as shown in the figure below, click the copy source code behind the red box.
![Copy source code from [Icon Library] on fontawesome website](https://img.vpsss.net/wp-content/uploads/2021/01/fontawestbjc04.png)
Copy source code from [Icon Library] on fontawesome website
Paste it into the [Navigation Tab] above, followed by the name of the navigation column. Finally, you must click [Save Menu] on the right side of the menu page to take effect.
5. Finally, let's see how the fontawesome icon works:
The effect of the fontawesome icon
Or you can directly look at the top of this page or open it Weiss Notes Any page can see the navigation bar effect of the page header.
Lao Wei's summary
- Most wordpress themes support the fontawesome icon. What we need to do is to select the appropriate icon, copy the source code and add it to the Navigation Tab, and then attach the name of the navigation column;
- Lao Wei found that some icons may cover the names of navigation columns during use, so it is recommended to replace them with appropriate icons;
- If your theme doesn't support it, you can also find the code on the website mentioned above and add it to the middle of<head></head>, so that the website supports the fontawesome icon;
- When you know how to use fontawesome, you can wrap it with<i>tags and use it anywhere on the website (not limited to the navigation bar);
- The fontawesome icon can also be changed in size, fixed in width in the list or navigation (to solve the problem of uneven icon alignment), and can easily achieve the reference effect, rotate any icon, rotate and flip any icon, and so on;
- Give site text Add fontawesome icon It can effectively beautify the overall effect of the website WordPress navigation bar icon Attracting users' attention can also make users stay, extend their stay and visit time, and to a certain extent, help optimize website seo.
