css中使用iconmoon图标
1、进入icomoon首页,进入icomoon-APP,选中图标,点击右下角generate font,记住图标标示,然后下载
2、下载后,安装字体,并将其放到css文件夹下
3、在css文件中加入以下代码@font-face {
font-family: 'icomoon';
src:url('../CSS/fonts/icomoon/fonts/icomoon.eot');
src:url('../CSS/fonts/icomoon/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../CSS/fonts/icomoon/fonts/icomoon.ttf') format('truetype'),
url('../CSS/fonts/icomoon/fonts/icomoon.woff') format('woff'),
url('../CSS/fonts/icomoon/fonts/icomoon.svg?#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
4、在css中加入一段代码
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
[data-icon]:before{
font-family: icomoon;
content: attr(data-icon);
speak:none;
}
在html中
<i class="icon_envelope" data-icon=""></i>
5、或者
在css中
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.icon_envelope:before{
font-family: "icomoon";
content:"\e903";
}
在html中
<i class="icon_envelope"></i>
6、此时,基本配置全部完成,图标可以显示,若需要修改样式,继续在css中修改即可