iconfont最基础使用

iconfont最基础使用

一、总结

一句话总结：

你加入购物车然后下载好了图标之后，里面有demo_index.html，会非常详细的教你 Unicode/Font class/Symbol三种使用方式

可以直接引iconfont.css来使用，因为里面的代码就是Unicode用@font-face{}方式定义iconfont字体的方式

1、定义字体的方式（比如iconfont）？

@font-face{}

@font-face {
    font-family: 'iconfont';
    src: url('../iconfont/iconfont.eot');
    src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../iconfont/iconfont.woff2') format('woff2'),
    url('../iconfont/iconfont.woff') format('woff'),
    url('../iconfont/iconfont.ttf') format('truetype'),
    url('../iconfont/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

二、Iconfont使用方法的详细教程，html怎样引入iconfont

转自或参考：Iconfont使用方法的详细教程，html怎样引入iconfont
https://blog.csdn.net/a419419/article/details/79446584

 

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）；
2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地；

3.接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）；
 

4.文件放到项目后，只需要引用iconfont.css这个文件即可；
5.最后一步肯定是调用了：
html:

<i class="iconfont">&#xe606;</i>
<i class="iconfont">&#xe602;</i>
<i class="iconfont">&#xe600;</i>
<i class="iconfont">&#xe608;</i>