I have learned the use of iconfont icons a long time ago, and today I encountered a case written with iconfon font icons, so I studied it in detail, and now organize it as follows.
1. Download
1. URL:
https://icomoon.io/#home
2. Click IcoMoon App.
3. Click https://icomoon.io/app
4. Enter the IcoMoon - Free interface, click to select the desired icon, you can choose more than one.
5. Click "Generate Font" at the bottom right of the page to generate fonts.
6. Click "Download" at the bottom right of the page to download. 
7. After the download is complete, an icomoon.zip compressed package will be generated, just unzip it.
2. Use font icons in web pages.
1. The webpage font icon effect is as follows.
2. The directory structure is as follows.
3. The code of the icomoon.css file is as follows
/*下面代码是下载的示例css中生成的，因为路径有所改动，css文件放入css文件夹中，所以url中的路径由./改为../*/
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7qyemc');
src: url('../fonts/icomoon.eot?7qyemc#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7qyemc') format('truetype'),
url('../fonts/icomoon.woff?7qyemc') format('woff'),
url('../fonts/icomoon.svg?7qyemc#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* 使用!important 防止浏览器扩展改变字体的问题*/
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* 字体渲染效果更好*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
span {
font-size:32px; /*1.改变字体图标的大小*/
color:#339f63; /*2.改变字体图标的颜色*/
margin-bottom: 10px;
}
.icon-connection:before {
content: "\e91b";
}
.icon-bubbles:before {
content: "\e96c";
}
.icon-link:before {
content: "\e9cb";
}
.icon-play2:before {
content: "\ea15";
}
.icon-arrow-up2:before {
content: "\ea3a";
}
.icon-circle-up:before {
content: "\ea41";
}
.icon-circle-right:before {
content: "\ea42";
}
.icon-circle-left:before {
content: "\ea44";
}
.icon-rss2:before {
content: "\ea9c";
}
.icon-android:before {
content: "\eac0";
}
4. In the icomoon_demo.html file, use the span tag and add the corresponding class name.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IcoMoon Demo</title>
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/icomoon.css">
</head>
<body>
<span class="icon-connection"></span>
<span class="icon-bubbles"></span>
<span class="icon-link"></span>
<span class="icon-play2"></span>
<span class="icon-arrow-up2"></span>
<span class="icon-circle-up"></span>
<span class="icon-circle-left"></span>
<span class="icon-circle-right"></span>
<span class="icon-android"></span>
<span class="icon-rss2"></span>
</body>
</html>
5. Note: The selected icon is different, and the .eot, .svg and other files generated in the fonts folder will be different each time. If you want to use a new icon, you need to go to the official website to select the desired icon to regenerate and re-download.
3. Examples of usage scenarios
The navigation bar of many websites has an inverted triangle, indicating that there is a drop-down menu here, as shown in the figure is the "Contact Customer Service" menu item of Taobao.
1. The file directory structure is as follows.
2. In this example, no separate css file is used, the css code is placed in the html file, and the path of the url is different from the above example. In addition, this example also uses the ::after pseudo-element, the specific code is as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器-字体图标倒三角</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
ul,li {
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
#service {
position: relative; /*父相*/
width: 105px;
height: 35px;
line-height: 35px;
margin: 20px 100px;
box-sizing: border-box;
padding-left: 10px;
}
#service::after {
position: absolute; /*绝对定位*/
top: 0px; /*定义字体图标的位置-水平方向*/
right: 10px; /*定义字体图标的位置-垂直方向*/
font-family: 'icomoon'; /*使用icomoon字体*/
content: '\e91e'; /*字体图标编号*/
color: #ccc; /*字体图标颜色*/
font-size: 20px; /*字体图标大小*/
}
#service ul {
position: absolute; /*子绝*/
left: 0;
top: 35px;
visibility: hidden;
}
#service li{
padding: 0 10px;
}
#service:hover {
background-color: #fff;
}
#service:hover ul {
visibility: visible;
background-color: #fff;
}
#service li:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="service">联系客服
<ul>
<li><a href="#">消费者客服</a></li>
<li><a href="#">卖家客服</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">网页版旺旺</a></li>
</ul>
</div>
</body>
</html>