vue 中使用iconfont Unicode編碼線上字體圖標的流程


1.打開http://www.iconfont.cn官網,搜索你想要的圖標。添加字體圖標到購物車,點擊購物車然后添加至項目,點擊確定

 

2.點擊圖標管理/我的項目,找到對應的文件,點擊Unicode,然后生成在線鏈接

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.新建iconfont.css文件,把在線生成的代碼粘貼復制進去即可

4.定義使用iconfont樣式,把下面代碼復制到iconfont.css里面

.iconfont{

    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;/*字體清除鋸齒效果*/
    -webkit-text-stroke-width: 0.2px;/*文本外邊框大小*/
    -moz-osx-font-smoothing: grayscale;}

5.在Footer.vue 中引入css文件 `@import '../assets/css/iconfont.css'`
6.在HTML中需要使用到圖標
<i class="iconfont">&#xe604;</i>     <!--里面寫上你想用的圖標下面的Unicode-->


 

 

 


免責聲明!

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



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