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

 



 


 上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）；

2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地；

iconfont最基础使用_人工智能

 

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

  iconfont最基础使用_html_02

 

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>


iconfont最基础使用_ico_03

 


 

 

 

 

 

 

 

 

 ​