WP Website Navigation Menu Icon Adding Method_iconfont_Font Awesome

You must have seen other websites' navigation menus with icons (if you don't knowhow to build a website yourself, you 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 type demonstrated 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 otherMethods for adding icons to website program menus or any location。

Icon Font Introduction

Icon fonts, literally understood, are themselves font files, but they consist of icons. When designing mobile apps or web pages, the use of icons is often encountered. In early web design, icon image files were used, but due to different resolutions, icons could become blurry. Therefore, the application of using 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 as a domestic platform, it offers fast network speeds.Visit iconfont Steps to use Iconfont:

1. Visit the website and log in at the top right corner.
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 corner 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 in the frontend to reference the icons.

Detailed usage of Iconfont:Select the icons you want and add them to the shopping cart.After selection, click the shopping cart at the top right corner of the webpage and add them to a project.Create a project; later, if you want to add more icons, you can directly add them to the project.After confirmation, code will appear. Copy all the code and add it to yourWordPress ThemesCSS file. If you don't know how to add it, you can also add it to the custom CSS code box in the theme customization.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 a menu, and add an i tag in the navigation label to call the icon.

<i class="iconfont">图标代码</i>

   

How to Use Font Awesome Icon Fonts

There are several websites for Font Awesome. Here, taking http://fontawesome.dashgame.com/ as an example, the usage is as follows: Add the following code to your theme's header.php (or the header code of other webpages):

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

<i class="fa fa-camera-retro"></i> 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 Pluginmethods to achieve it, as long as your server performance is good, don't worry about 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, similarly use the i tag to call:

<i class="fas fa-stroopwafel"></i>

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.htmlBuilt-in WordPress admin font, can be used directly. That's all forHow to add FontAwesome icons to menus in a WordPress blog. Go ahead and add icons to your website menus now.