How to Add Icons to WordPress Website Navigation Menu_iconfont_Font Awesome

You must have seen other websites with icons in their navigation menus (if you don't knowhow to build a website yourselfyou can go back to the Naibabiji homepage and look at the navigation). For example, the homepage has a house icon, a shopping cart icon before the purchase button, a gear icon before the settings button, etc. Just like the example shown in the image below.So how is this icon effect achieved? Actually, it's just about introducing an icon font. This article teaches you how to add icons to WordPress or otherwebsite program menus or any location.。

Icon Font Introduction

Icon fonts, literally understood, are themselves font files, but they are fonts of icons. When designing mobile apps or web pages, the use of icons is often encountered. The earliest web designs used icon image files, but due to different resolutions, icons could become blurry. Therefore, the use of icon fonts to replace icon images later emerged. There are many types of icon fonts, some paid and some free. This article introduces two widely used icon fonts: iconfont and Font Awesome.

How to Use iconfont Icon Fonts

Iconfont is a vector icon library created by Alibaba, providing functions such as vector icon downloads, online storage, and format conversion. It is powerful, rich in icons, and being a domestic platform, it offers fast network speeds.Visit iconfont Iconfont Usage Steps:

1. Visit the website and log in at the top right.
2. Select the icons you like and click the shopping cart button to add them to your collection.
3. Click the shopping cart button at the top right and add them to a project.
4. Create a project name and confirm.
5. Copy the code and add it to your website's CSS file.
6. Use the li tag on the frontend to reference the icon.

Detailed Iconfont Usage Method:Select the icons you want and add them to the shopping cart.After selection, click the shopping cart at the top right of the webpage, then add them to a project.Create a project; you can later add more icons directly to this project.After confirmation, the code will appear. Copy all the code and add it toWordPress Themeyour CSS file. If you don't know how to add it, you can also add it to the custom CSS code box in the theme customizer.Then, add the following CSS code as well to define the class.

/* 定义class */
.iconfont{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

Next, go back to where you want to display the icon, such as the menu, and add an i tag in the navigation label to call the icon.

 class="iconfont">图标代码

How to Use Font Awesome Icon Fonts

There are several websites for Font Awesome. Here, using http://fontawesome.dashgame.com/ as an example, the usage method is as follows: Add the following code in your theme's header.php (for other websites, add it in the webpage header code):

Then, similarly use the i tag to call the icon.

 fa-camera-retro

For more usage methods, you canrefer to the official website.

WordPress Plugin Method

If you are not familiar with adding webpage code, you can also directly useWordPress Pluginthe method to achieve it. As long as your server performance is good, don't be afraid of installing many plugins.For example, install Font AwesomeDownload LinkAfter installation and activation, you can set the display method in the settings, whether to display as webfont or as SVG icons. When using, also use the i tag to call:

Additionally, the plugin also supports shortcode calls:

[icon name="stroopwafel"]

More Icon Fonts

Besides iconfont and Font Awesome recommended in this article, there are many other available icon fonts. You can choose according to your needs.fontellohttp://fontello.com/ Customize your own icon font library online, or directly download the entire icon set from GitHub. This project is also open source.icomoonhttp://icomoon.io/app/#/select You can import SVG format fonts online, edit them, and then download them for use. Pretty cool, right!Glyphicon Halflingshttp://glyphicons.com/ This icon font can be used for free under Bootstrap. It comes with over 200 icons.Dashicons icon font https://blog.naibabiji.com/skill/wordpress-user-dashicons.htmlWordPress backend comes with its own font, which can be used directly. The above ishow to add Font Awesome icons to the menu in a wp blogall the content. Hurry up and add icons to your website menu.