在uni-app中使用阿里巴巴圖標庫字體圖標


阿里巴巴圖標庫 

添加圖標、下載、引入的使用方法:

1、添加圖標

 

 

 

 

 

 

 

 

 

 

 

2、下載到字體圖標文件后,復制圈中的兩個文件到static目錄下:

       

3、新建一個自定義字體圖標樣式文件: font-icon.css

 

 

 

 

 

 

 

4、給font-icon.css添加內容

 

 

 

 

 

 5、font-icon.css具體代碼:

@font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') format('truetype'); 
} .icon { color: #999; font-family: uniicons; font-size: 42upx; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; text-decoration: none; -webkit-font-smoothing: antialiased;
} .icon.uni-active { color: #1ca6ec;
} 

// 下面的樣式直接復制 .iconfont
{ font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-fanhuishouye:before { content: "\e631"; } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-shouye:before { content: "\e63f"; } .icon-fanhuishouye:before { content: "\e640"; } .icon-wode:before { content: "\e641"; } .icon-guanli:before { content: "\e642"; }

 6、頁面寫入字體圖標

<view class="icon icon-showye"></view>

 

 

 


免責聲明!

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



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