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 introducing an icon font. This article teaches you how to add icon fonts to WordPress or otherMethods for adding icons to website program menus or any location。

Icon Font Introduction

Icon font, literally understood, is a font file itself, but it consists of icon glyphs. In some mobile apps or web designs, icons are often used. Early web designs used icon image files, but due to different resolutions, icons would become blurry. Therefore, the use of icon fonts to replace icon images began.

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>

<link rel='stylesheet' href='你的iconfont Font class代码' type='text/css' media='all' />

How to Use Font Awesome Icon Fonts

Font Awesome has several websites. Here we take http://fontawesome.dashgame.com/ as an example. The usage is as follows:

Add the following code to your theme's header.php (for other websites, add it to the head section of the webpage):

<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 Awesome

Download Link

After installation and activation, you can set the display mode in the settings, either as webfont or as SVG icons.

When using, also call with the i tag:

<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.

fontello

http://fontello.com/

Customize your own icon font library online, or download the entire icon set directly from GitHub. This project is also open source.

icomoon

http://icomoon.io/app/#/select

Import SVG format fonts online, edit them, and then download them for use. Pretty cool!

Glyphicon Halflings

http://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.html

WordPress backend comes with its own fonts, which can be used directly.

The above isHow to add FontAwesome icons to menus in a WordPress blogAll the content, go ahead and add icons to your website menu.