uni-app中使用阿里巴巴矢量圖標庫

1、打開網址，鏈接： 阿里巴巴矢量圖標庫

2、注冊賬號并登錄，已有賬號直接登錄

3、選擇圖標，點擊添加入庫

4、點擊購物車圖標，查看添加入庫的圖標

5、點擊“添加至項目”，可以選擇將圖標添加至已有項目中，或添加至新創建項目中。

6、添加成功后，進入項目詳情頁面，可以看到當前項目所包含的所有圖標。

注意： 添加新圖標至項目后，需要點擊”更新代碼“。并將更新后的代碼重新下載，導入項目中。

7、下載代碼至本地

8、找到下載的壓縮包，解壓縮后復制 iconfont.css 文件到uniapp項目的common文件夾中（若沒有該文件夾，可以新建一個）

9、去到項目中復制代碼，然后打開iconfont.css文件，替換@font-face中的內容。并且在//at前加上https:。

替換前iconfont.css內容：

@font-face {font-family: "iconfont"; /* Project id 2555092 */src: url('iconfont.woff2?t=1621316808304') format('woff2'),url('iconfont.woff?t=1621316808304') format('woff'),url('iconfont.ttf?t=1621316808304') format('truetype'); }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-fanchuan:before {content: "\e603"; }.icon-daohang:before {content: "\e602"; }

替換后iconfont.css內容：

@font-face {font-family: 'iconfont'; /* Project id 2555092 */src: url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff2?t=1621316773774') format('woff2'),url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff?t=1621316773774') format('woff'),url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.ttf?t=1621316773774') format('truetype'); }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-fanchuan:before {content: "\e603"; }.icon-daohang:before {content: "\e602"; }

10、iconfont.css中添加以下內容（目的：使得圖標可以被應用于text、view、button等組件）

text[class*="icon-"], view[class*="icon-"], button[class*="icon-"] {font-family: "iconfont";font-size: inherit;font-style: normal; }

11、項目中引用，可全局引用（App.vue的style標簽中引用）、局部引用（在具體的.vue文件中的style標簽中引用）。推薦：全局引用方式 。

12、頁面中使用圖標(第15行)

flex3_zonghe.vue

<!-- 綜合練習：回顧Flex流式布局的基礎語法以及CSS編寫規范--> <template><view class="container"><view class="swipper"><image src="../../static/hongzao.jpg" mode="aspectFill"></image></view><view class="title"><view class="tl"><button>出售</button><text>新疆大棗</text><!-- <text class="xingxing icon-xing"></text> --><text class="xingxing icon-fanchuan"></text></view><view class="des">高端品質，無敵質量!</view></view><view class="detail"><view class="danjia"><text>預售單價:</text><text>1.99元/公斤</text></view><view class="chanliang"><text>預計總產量:</text><text>500/公斤</text></view><view class="address"><text>地址:</text><text>江蘇省蘇州市吳中區</text></view></view><view class="share"><text class="icon-fenxiang1">分享</text><text class="icon-haibaofenxiang">立即分享</text><text class="icon-haibaofenxiang">生成海報</text></view><view class="footer"><view class="left"><text>受關注:</text><text>200次</text></view><view class="right"><text class="icon-sixin1">私信他</text><text class="icon-sixin">聯系他</text></view></view></view> </template><script></script><style lang="less" scoped>@margin: 5px;@width: 50%;.container {display: flex;flex-direction: column;margin: 10px;font-size: 18px;color: #333;.swipper {text-align: center;image {width: 100%;}}.title {.tl {display: flex;text-align: left;button {margin: 5px;font-size: 12px;color: #fff;border-radius: 15px;background-color: #18B566;}text {margin-top: 5px;font-weight: 700;}.xingxing {position: absolute;right: 20px;}}.des {margin-left: @margin;}}.detail {display: flex;flex-flow: row wrap;justify-content: space-between;margin: @margin;.danjia {// flex: 0 0 50%;width: @width;//這一行代碼的作用與上一行相同margin: @margin 0;text:nth-child(2) {color: #f00;}}.chanliang {width: @width;margin: @margin 0;}.address {margin: @margin 0;}}.share {display: flex;flex-flow: row wrap;justify-content: space-around;color: #7CC8B5;height: 50px;line-height: 50px;background-color: #E6FBF4;}.footer {display: flex;flex-flow: row wrap;justify-content: space-between;margin-top: 60px;padding: 0 10px;color: #fff;height: 50px;line-height: 50px;background-color: #1FC094;.right {text:nth-child(1) {padding-right: 10px;border-right: 2px solid #89E4CF;}text:nth-child(2) {padding-left: 10px;}}}}</style>

示例圖：

總結

以上是生活随笔為你收集整理的uniapp引入阿里巴巴矢量图标库的全部內容，希望文章能夠幫你解決所遇到的問題。

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