vuecli3使用阿里巴巴字體圖標庫


弄了一晚上太坑了!!!!

1.在阿里圖標庫下載圖標

2.下載的解壓后,選取四個字體文件

 

 3.在src/assets文件夾下新建一個叫iconfont的文件夾,把這個四個字體文件放進去

4.在src/assets/文件夾下新建一個叫styles的文件夾,把iconfont.css放進去

5.在main.js里引用iconfont.css

import './assets/styles/iconfont.css'

6.更改iconfont.css的路徑

 

 7.由於字體圖標的類名太長或者是個拼音,所以,更改iconfont.css里的類名,叫自己想要的名字

.icon-test:before {
  content: "\e61c";
}

8.然后最重要的一步了,把類名添加到對應的標簽里,前面一定要加上一個iconfont類

 <span class="iconfont icon-test" style="font-size:100px"></span>

 

效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM