HTML 阿里巴巴矢量圖標庫官網（https://www.iconfont.cn/）下載適用的圖標應用到自己項目上

1、首先肯定是需要打開阿里巴巴矢量圖標庫官網（https://www.iconfont.cn/），有賬號的可以直接登錄，沒有賬號的需要注冊一個。

 

 

 /

 

 

2、登錄以后就可以選擇自己需要的圖標先加入購物車，和淘寶購物一個樣，等選擇好了就可以去購物車清空購物車了。

我這里添加了兩個圖標等一下就要把它放在項目中的按鈕里。這里需要下載源代碼

 

 

 

 3、點擊下載代碼可以直接下載到本地

 

 

 

 4、打開下載好的文件，可以看到有好多沒有的文件（不過這些文件可以幫助你去怎么使用圖標），這里我們只需要選中的這五個文件，把這些文件單獨復制出來放在Fonts文件夾下。

 

 

 

 

 5、這里我們可以額外的需要一個圖標工具 （FontLab-VI-Win64-Install-7044.exe） 這個就看自己需不需要了

下載好可以直接打開這個工具

 

 

 

 

 

打開后就是下面這個樣子，可以看到圖標的樣子，鼠標點在上面可以看到對應的編碼（箱線圖對應的編碼是：e6cf）。

 

 

 

 

 6、接下來就是怎么用圖標了，在css樣式中添加如下代碼：

第一步：生成@font-face  （對應文件的路徑要寫正確）

@font-face {
    font-family: iconfont;
    src: url(../fonts/iconfont.eot?v=256);
    src: url(../fonts/iconfont.eot?v=256#iefix) format('embedded-opentype'),url(../fonts/iconfont.woff2?v=256) format('woff2'),url(../fonts/iconfont.woff?v=256) format('woff'),url(../fonts/iconfont.ttf?v=256) format('truetype'),url(../fonts/iconfont.svg?v=256#layui-icon) format('svg');
}　

第二步：定義使用 iconfont 的樣式

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

第三步：挑選相應圖標並獲取字體編碼，應用於頁面(上面看到的圖標編碼是：e6cf,下面的html中就可以直接使用&#xe6cf 這樣的編碼來展示圖標了，更重要的是class=“iconfont” 就是上面第二步中css文件中定義的樣式)

 

 

 7、效果展示

 

 

總體用起來還是比較簡單的，大家可以在官網中多下載一些只需要配置一次就能全部用到了，希望對你們有幫助！