Friends who visit this site can find that the author's navigation menu is with icons, and wordpress navigation menu default is no icon, the following is my blog icon effect: And these icons are like text, you can change its color, Can beautify our web interface.Here, a word is raised: Font Awesome
Font Awesome Introduction
Font Awesome is a popular font icon tool.With the popularity of Bootstrap gradually recognized, FontAwesome can not only be used on bt, but also can be applied to various web front-end development.Compared to the traditional use of background images as icons, the font icons mainly support adaptation, can use various features of the font (such as discoloration, larger and smaller, font shadows, etc.), reduce data loading, and styles are more easily defined.
Font Awesome features
- One font file, 369 icons.
- Unlimited scalability: Scalable vector graphics means that every icon looks awesome at any size.
- Free and free: You can apply it to your business.
- CSS controls: Easily define the icon's color, size, shadow, and any CSS-related features.
- Perfect retina display: Use vector fonts, which means they can be perfectly displayed in high resolution displays
- Born for Bootstrap: Fully Compatible with Bootstrap New 3.0
- Desktop friendly: you can see a list of font styles
- Compatible screen reader: Unlike other font icons, screen readers are not compatible
Use of Font Awesome
- You just have to go to: http://fontawesome.io Download the archive and extract it to your project.
- Add the corresponding font-awesome style to the head of your HTML header.
1<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
- Start your project based on the case here.
For compatibility with Internet Explorer, use version 3.2.1 of Font-awesome.Download font-awesome-ie7.css or font-awesome-ie7.min.css.Then introduce the style file in the project.
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
How to set icons for wordpress directory
- First introduced in header.php, I put the above file in the theme directory, so the introduction of code is
1<!-- AWESOME FONT --> <link rel="stylesheet" id="fontawesome-style-css" href="<?php bloginfo(" template_directory'); ?>/font-awesome/css/font-awesome .min.css?ver=4.0.1' type='text/css' media='all' />
Then set a menu in the wordpress background - menu editor such as the home page navigation tag attributes:
<i class="fa fa-home">Home</i>
This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!
Reprinted Note Source: Baiyuan's Blog>>https://wangbaiyuan.cn/en/how-to-wordpress-directory-settings-icon-2.html