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>