微信小程序引入外部矢量圖標(biāo)（阿里巴巴矢量圖標(biāo)）

2年前作者：m0_59971110分類：Toy博客閱讀(94)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序引入外部矢量圖標(biāo)（阿里巴巴矢量圖標(biāo)）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1.顯示效果

微信小程序引入第三方圖標(biāo),微信小程序,小程序

?文章來源地址http://www.zghlxwxcb.cn/news/detail-562683.html

2.實(shí)現(xiàn)步驟

進(jìn)入阿里巴巴矢量圖標(biāo)庫

搜索想要的矢量圖標(biāo)并加入購物車，點(diǎn)擊右上角購物車

微信小程序引入第三方圖標(biāo),微信小程序,小程序

將圖標(biāo)添加至項(xiàng)目

微信小程序引入第三方圖標(biāo),微信小程序,小程序

更改項(xiàng)目設(shè)置

微信小程序引入第三方圖標(biāo),微信小程序,小程序

將字體格式設(shè)置為TTF Base64

? 微信小程序引入第三方圖標(biāo),微信小程序,小程序

點(diǎn)擊下載至本地

微信小程序引入第三方圖標(biāo),微信小程序,小程序

?在微信小程序中新建文件夾

微信小程序引入第三方圖標(biāo),微信小程序,小程序

?將下載到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夾中

微信小程序引入第三方圖標(biāo),微信小程序,小程序

?更改后綴名為wxss

微信小程序引入第三方圖標(biāo),微信小程序,小程序

將矢量圖復(fù)制到class中

微信小程序引入第三方圖標(biāo),微信小程序,小程序

?使用圖標(biāo)：

在app.wxss中引入文件

微信小程序引入第三方圖標(biāo),微信小程序,小程序

<view>
  <text class="iconfont icon-kafei"></text>
  <text class="iconfont icon-yaopin"></text>
  <text class="iconfont icon-yinle"></text>
  <text class="iconfont icon-lvxing red"></text>
  <text class="iconfont icon-wangyou red"></text>
  <text class="iconfont icon-dianpu red"></text>
  <text class="iconfont icon-tupian blue"></text>
  <text class="iconfont icon-kouhong blue"></text>
  <text class="iconfont icon-qiandai blue"></text>
</view>

/* pages/iconfont/iconfont.wxss */
view{
  display: flex;
  flex-wrap: wrap;
}
.iconfont{
  font-size: 200rpx;
  line-height: 250rpx;
  padding: 20rpx 16rpx;
}
.red{
  color: red;
}
.blue{
  color: blue;
}

到了這里，關(guān)于微信小程序引入外部矢量圖標(biāo)（阿里巴巴矢量圖標(biāo)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

微信小程序使用字體圖標(biāo)——鏈接引入
目錄 1.下載字體圖標(biāo) ?1.選擇需要的圖標(biāo)加入購物車添加到項(xiàng)目 2.查看項(xiàng)目? 3.生成在線鏈接? ?4.復(fù)制生成的鏈接等下放到iconfont.json中?編輯 2.引入鏈接 1.下載? 2.生成iconfont.json文件 3. 在iconfont.json中放入生成的鏈接 4.需要重新編譯小程序之后在終端執(zhí)行 5.在app.json中引入字
2024年02月16日
瀏覽(1199)
三種方式在HTML使用阿里字體圖標(biāo)--iconfont阿里巴巴矢量圖標(biāo)庫
好久沒用到阿里巴巴的圖標(biāo)，突然要用到就發(fā)現(xiàn)不會(huì)用了，只會(huì)導(dǎo)出png格式的圖標(biāo)png了= = 目錄 1、字體圖標(biāo) 方法一、本地使用通過類名使用阿里矢量圖標(biāo) 1、把圖標(biāo)添加入庫 2、把圖標(biāo)添加到項(xiàng)目 ?3、下載字體圖標(biāo) 4、使用文件 5、在對(duì)應(yīng)的HTML頁面上引入css 6、使用字體圖標(biāo)
2024年02月16日
瀏覽(24)
vue 項(xiàng)目中使用阿里巴巴矢量圖標(biāo)庫
1.網(wǎng)址：https://www.iconfont.cn/ 2.手動(dòng)創(chuàng)建自己的項(xiàng)目圖標(biāo)庫選中圖標(biāo) → 添加入庫（點(diǎn)擊購物車）→ 完成后點(diǎn)擊上方菜單欄的購物車 → 添加至項(xiàng)目（沒有則新建項(xiàng)目）→ 自動(dòng)打開項(xiàng)目圖標(biāo)庫 → 點(diǎn)擊下載至本地 → 點(diǎn)擊demo包的demo_index.html，上面有三種使用方式，分別是Unicode、
2024年02月15日
瀏覽(24)
微信小程序引入外部的CSS或iconfont
使用外部樣式的方法是： @import?\\\'相對(duì)路徑下的外部樣式文件.wxss\\\'; iconfont作為一種特殊的CSS也逃不開這個(gè)命運(yùn)，小程序的wxss文件font-face中的url不接受HTTP地址參數(shù)，但是接受base64，因此而我們可以將字體文件下載后轉(zhuǎn)化為base64. 方案如下： 1、到阿里巴巴矢量圖標(biāo)庫(iconfont-阿里
2024年02月04日
瀏覽(23)
微信小程序（十二）在線圖標(biāo)與字體的獲取與引入
注釋很詳細(xì)，直接上代碼上一篇新增內(nèi)容： 1.從IconFont獲取圖標(biāo)與文字的樣式鏈接 2.將在線圖標(biāo)配置進(jìn)頁面中（源碼） 3.將字體配置進(jìn)頁面文字中（源碼） 4.css樣式的多文件導(dǎo)入獲取鏈接 1.獲取圖標(biāo)鏈接登入IconFont 點(diǎn)擊跳轉(zhuǎn) 溫馨提醒：之后生成的圖標(biāo)名會(huì)以這里設(shè)定的名字
2024年01月24日
瀏覽(89)
微信小程序中 vant weapp 使用外部的icon作為圖標(biāo)的步驟
首先在當(dāng)前項(xiàng)目的根目錄中，創(chuàng)建assets文件夾，用于存放靜態(tài)資源，assets里面的文件夾可以自己定義，圖片，css… iconfont官網(wǎng) https://www.iconfont.cn/ 添加一個(gè)圖標(biāo)到iconfont項(xiàng)目中，點(diǎn)擊生成在線鏈接，記得選unicode，然后再生成在線鏈接（待會(huì)兒會(huì)使用）接著將當(dāng)前項(xiàng)目的代碼下
2024年02月05日
瀏覽(63)
阿里巴巴矢量圖標(biāo)庫在uni-app中的使用方法
開發(fā)工具為：HBuilderX 步驟1: 先將喜歡的字體圖標(biāo)加入購物車中 ?點(diǎn)擊購物車然后點(diǎn)擊添加至項(xiàng)目 ?有就選擇沒有就新建步驟2: 1.將項(xiàng)目文件下載至本地 ?2.打開下載到本地的項(xiàng)目文件，將箭頭所指的四個(gè)文件放入項(xiàng)目的static目錄下(可以新建個(gè)文件夾放入，方便管理) 3.打開i
2024年01月20日
瀏覽(24)
[Vue]從數(shù)據(jù)庫中動(dòng)態(tài)加載阿里巴巴矢量圖標(biāo)的兩種方式
記錄一次在Vue中動(dòng)態(tài)使用阿里巴巴矢量圖標(biāo)庫這是本人第一次使用阿里巴巴的矢量圖標(biāo)庫，簡(jiǎn)單的導(dǎo)入和使用的話網(wǎng)上的教程很多，這里不多贅述，本人的需求是從數(shù)據(jù)庫中加載出來并且顯示到頁面上，接下來簡(jiǎn)述一下如何實(shí)現(xiàn)。以下代碼均是本人實(shí)際推敲、測(cè)試可用后寫
2024年01月20日
瀏覽(21)
微信小程序引入使用fontawesome圖標(biāo)庫【內(nèi)附懶人包下載導(dǎo)入即用】
小程序引入fontawesome需要做的步驟是比其他的多一點(diǎn)，比如說本質(zhì)上下載下來fontawsome沒法直接用，他有好多的css，其實(shí)也有好多TTF的字體文件，對(duì)于他的這種 TTF的文件是需要給它進(jìn)行一個(gè)轉(zhuǎn)換，轉(zhuǎn)換之后把它變成是比如說base64，它編碼變成之后再把它引入到我們的項(xiàng)目中。
2024年02月04日
瀏覽(98)
微信小程序引入Vant Weapp修改樣式不起作用,使用外部樣式類進(jìn)行覆蓋
? ? ? ? 在項(xiàng)目中使用第三方組件修改css樣式時(shí),總是出現(xiàn)各種各樣問題,修改的css樣式不起作用,沒有效果,效果不符合預(yù)期等。栗子(引入一個(gè)搜索框組件) 實(shí)現(xiàn)效果:? 左側(cè)有一個(gè)搜索文字背景為藍(lán)色,接著跟一個(gè)搜索框 wxml wxss emmm...明明我們css都寫了,這出現(xiàn)的是什么鬼 ? 審查
2024年02月02日
瀏覽(31)