1. 首先登錄阿里icon,然后找到你想要用的圖標全部加入到購物車，并且點擊購物車，添加到相應的項目 2. 找到對應的icon項目，點擊下載至本地

3.將紅框框起來的文件放到項目中

4. 創建一個font-icon，做以下處理 @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: #ff3939; }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }/* 以下為要替換的icon名稱，在下載的壓縮文件里面的ionfon.css里面復制到下面*/ .icon-shenhe1:before {content: "\e600"; }.icon-shezhi:before {content: "\e61b"; } 5. 在uniapp的app.vue文件的style中引入并且使用 @import "@/common/css/font-icon.css"; // global `在這里插入代碼片`css//頁面中使用 <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>

總結

以上是生活随笔為你收集整理的uniapp使用阿里icon详细步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。