方式一 ： 下載svg導(dǎo)入
- 優(yōu)點(diǎn)：操作方便，支持多彩圖標(biāo)
- 缺點(diǎn)：會增加源代碼大小
下載 svg 格式的圖標(biāo)圖片，放入源碼中使用
小程序項(xiàng)目中的路徑為 assets\icon\美食.svg
使用時(shí)-代碼范例
<image class="imgIcon" src="/assets/icon/美食.svg" />
.imgIcon {
height: 60rpx;
width: 60rpx;
margin-right: 20rpx;
}
方式二 ： 導(dǎo)入wxss
- 優(yōu)點(diǎn)：不會增加源代碼大小
- 缺點(diǎn)：不支持多彩圖標(biāo)，更新比較麻煩
將圖標(biāo)添加到自己的圖標(biāo)項(xiàng)目中后，生成對應(yīng)的 css 鏈接
瀏覽器打開css鏈接
將其拷貝到小程序項(xiàng)目中新建的文件 assets\icon\icon.wxss 中
@font-face {
font-family: "iconfont";
/* Project id 1167694 */
src: url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff2?t=1681094540417') format('woff2'),
url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff?t=1681094540417') format('woff'),
url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.ttf?t=1681094540417') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-feiji:before {
content: "\e8b2";
}
.icon-zhuizhuiju:before {
content: "\ebdb";
}
.icon-lvyou:before {
content: "\e618";
}
.icon-meishi:before {
content: "\fab7";
}
.icon-kejian:before {
content: "\e630";
}
.icon-bukejian:before {
content: "\e604";
}
使用時(shí)-代碼范例
文章來源：http://www.zghlxwxcb.cn/news/detail-513699.html
<view class="iconfont icon-meishi">
</view>
在頁面的 wxss 中，記得導(dǎo)入圖標(biāo)的 wxss 文件文章來源地址http://www.zghlxwxcb.cn/news/detail-513699.html
@import "/assets/icon/icon.wxss"
到了這里，關(guān)于【微信小程序-原生開發(fā)】添加自定義圖標(biāo)（以使用阿里圖標(biāo)庫為例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
