本篇文章給大家介紹一下微信小程序中自帶圖標(biāo)和外部圖標(biāo)的使用方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程
自帶圖標(biāo)
<view class="container"> ??<view class="icon-box"> ????<icon class="icon-box-img" type="success" size="93"></icon> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">成功</view> ??????<view class="icon-box-desc">用于表示操作順利完成</view> ????</view> ??</view> ??<view class="icon-box"> ????<icon class="icon-box-img" type="info" size="93"></icon> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">提示</view> ??????<view class="icon-box-desc">用于表示信息提示；也常用于缺乏條件的操作攔截，提示用戶所需信息</view> ????</view> ??</view> ??<view class="icon-box"> ????<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">普通警告</view> ??????<view class="icon-box-desc">用于表示操作后將引起一定后果的情況；也用于表示由于系統(tǒng)原因而造成的負(fù)向結(jié)果</view> ????</view> ??</view> ??<view class="icon-box"> ????<icon class="icon-box-img" type="warn" size="93"></icon> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">強(qiáng)烈警告</view> ??????<view class="icon-box-desc">用于表示由于用戶原因造成的負(fù)向結(jié)果；也用于表示操作后將引起不可挽回的嚴(yán)重后果的情況</view> ????</view> ??</view> ??<view class="icon-box"> ????<icon class="icon-box-img" type="waiting" size="93"></icon> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">等待</view> ??????<view class="icon-box-desc">用于表示等待，告知用戶結(jié)果需等待</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="success_no_circle" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">多選控件圖標(biāo)_已選擇</view> ??????<view class="icon-box-desc">用于多選控件中，表示已選擇該項(xiàng)目</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="circle" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">多選控件圖標(biāo)_未選擇</view> ??????<view class="icon-box-desc">用于多選控件中，表示該項(xiàng)目可被選擇，但還未選擇</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="warn" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">錯(cuò)誤提示</view> ??????<view class="icon-box-desc">用于在表單中表示出現(xiàn)錯(cuò)誤</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="success" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">單選控件圖標(biāo)_已選擇</view> ??????<view class="icon-box-desc">用于單選控件中，表示已選擇該項(xiàng)目</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="download" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">下載</view> ??????<view class="icon-box-desc">用于表示可下載</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="info_circle" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">提示</view> ??????<view class="icon-box-desc">用于在表單中表示有信息提示</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="cancel" size="23"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">停止或關(guān)閉</view> ??????<view class="icon-box-desc">用于在表單中，表示關(guān)閉或停止</view> ????</view> ??</view> ??<view class="icon-box"> ????<view class="icon-small-wrp"> ??????<icon class="icon-small" type="search" size="14"></icon> ????</view> ????<view class="icon-box-ctn"> ??????<view class="icon-box-title">搜索</view> ??????<view class="icon-box-desc">用于搜索控件中，表示可搜索</view> ????</view> ??</view> </view>
阿里圖標(biāo)庫(kù)
下載到本地以后，解壓出來(lái)有一個(gè)文件夾，里面有一個(gè)文件名字iconfont.css，編輯并復(fù)制其中的內(nèi)容
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1537179845858'); /* IE9*/
src: url('iconfont.eot?t=1537179845858#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1537179845858') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1537179845858#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-right:before { content: "\e601"; }
.icon-29:before { content: "\e61a"; }
.icon-chongzhi:before { content: "\e614"; }
.icon-guanyuwomen:before { content: "\e61f"; }
.icon-tixian:before { content: "\e649"; }
.icon-order-add:before { content: "\e747"; }
.icon-option:before { content: "\e60b"; }
.icon-guanliyuan:before { content: "\e600"; }
.icon-qianbao:before { content: "\e64a"; }
.icon-xuanxiang:before { content: "\e7ea"; }
.icon-Cash:before { content: "\e611"; }打開(kāi)微信開(kāi)發(fā)者工具，找打app.wxss，將剛才復(fù)制的內(nèi)容粘貼至下面
在wxml中引用icon圖標(biāo)，例如引用icon-guanliyuan:before 這是一個(gè)管理員圖標(biāo)
<icon class="icon-guanliyuan:before"></icon>
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程教學(xué)??！
以上是淺談微信小程序中引入并使用自帶和外部圖標(biāo)的方法的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Win11怎么禁用任務(wù)欄縮略圖預(yù)覽? 關(guān)閉鼠標(biāo)移動(dòng)任務(wù)欄圖標(biāo)顯示縮略圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統(tǒng)中關(guān)閉鼠標(biāo)移動(dòng)任務(wù)欄圖標(biāo)時(shí)顯示的縮略圖功能。這一功能在默認(rèn)情況下是開(kāi)啟的，當(dāng)用戶將鼠標(biāo)指針懸停在任務(wù)欄上的應(yīng)用程序圖標(biāo)上時(shí)，會(huì)顯示該應(yīng)用程序的當(dāng)前窗口縮略圖。然而，有些用戶可能覺(jué)得這個(gè)功能不太實(shí)用或者會(huì)干擾到他們的使用體驗(yàn)，因此想要關(guān)閉它。任務(wù)欄縮略圖可能很有趣，但它們也可能分散注意力或煩人?？紤]到您將鼠標(biāo)懸停在該區(qū)域的頻率，您可能無(wú)意中關(guān)閉了重要窗口幾次。另一個(gè)缺點(diǎn)是它使用更多的系統(tǒng)資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何禁用它。不過(guò)
如何在Ubuntu開(kāi)始菜單中移除圖標(biāo)？
Jan 13, 2024 am 10:45 AM
ubuntu系統(tǒng)開(kāi)始菜單里面列出了好多的軟件圖標(biāo)，有很多不常用的圖標(biāo)，想要?jiǎng)h除，該怎么刪除呢？下面我們就來(lái)看看詳細(xì)的教程。1、首先進(jìn)入ubuntu桌面，點(diǎn)擊左邊面板下面的開(kāi)始菜單。2、里面可以找到一個(gè)文本編輯器圖標(biāo)，我們要把它刪除了。3、現(xiàn)在我們回到桌面直接鼠標(biāo)右鍵打開(kāi)終端。4、使用命令打開(kāi)應(yīng)用列表目錄。sudonautilus/usr/share/applicationssudonautilus~/.local/share/applications5、在里面找到對(duì)應(yīng)的文本編輯器圖標(biāo)。6、接著直
閑魚(yú)微信小程序正式上線
Feb 10, 2024 pm 10:39 PM
閑魚(yú)官方微信小程序悄然上線，在小程序中可以發(fā)布閑置與買家/賣家私信交流、查看個(gè)人資料及訂單、搜索物品等，有用好奇閑魚(yú)微信小程序叫什么，現(xiàn)在快來(lái)看一下。閑魚(yú)微信小程序叫什么答案：閑魚(yú)，閑置交易二手買賣估價(jià)回收。1、在小程序中可以發(fā)布閑置、與買家/賣家私信交流、查看個(gè)人資料及訂單、搜索指定物品等功能;2、在小程序的頁(yè)面中有首頁(yè)、附近、發(fā)閑置、消息、我的5項(xiàng)功能；3、想要使用的話必要要開(kāi)通微信支付才可以購(gòu)買；
下載手機(jī)設(shè)置圖標(biāo)到桌面「秒懂：Android手機(jī)為應(yīng)用換圖標(biāo)步驟」
Feb 06, 2024 pm 04:27 PM
為了美化桌面，很多用戶都喜歡定期更換桌面主題，時(shí)刻保持新鮮感。不過(guò)，換主題卻不會(huì)更改第三方APP的圖標(biāo)，個(gè)性美化不夠徹底。如果你厭倦了千篇一律的應(yīng)用圖標(biāo)，不妨將它們替換掉吧。理論上，想給手機(jī)APP換圖標(biāo)，通常需要ROOT系統(tǒng)和一些工具來(lái)拆包替換圖標(biāo)。但由于絕大多數(shù)手機(jī)不再支持ROOT系統(tǒng)，我們需要尋找其他方法來(lái)實(shí)現(xiàn)。例如，一些特定的應(yīng)用程序可能提供了自定義圖標(biāo)的選項(xiàng)，或者可以通過(guò)第三方啟動(dòng)器來(lái)實(shí)現(xiàn)個(gè)性化圖標(biāo)。此外，一些手機(jī)品牌也推出了專門(mén)的主題和圖標(biāo)商店，供用戶選擇和更換圖標(biāo)。在各大應(yīng)用商店中，
您的T-mobile智能手機(jī)上的5G UC與5G UW圖標(biāo)的含義是什么？
Feb 24, 2024 pm 06:10 PM
T-Mobile用戶已經(jīng)開(kāi)始注意到，他們的手機(jī)屏幕上的網(wǎng)絡(luò)圖標(biāo)有時(shí)顯示為5GUC，而其他運(yùn)營(yíng)商則顯示為5GUW。這并不是一個(gè)拼寫(xiě)錯(cuò)誤，而是代表著不同類型的5G網(wǎng)絡(luò)。事實(shí)上，運(yùn)營(yíng)商們正在不斷擴(kuò)大他們的5G網(wǎng)絡(luò)覆蓋范圍。在這個(gè)話題中，我們將探討一下T-Mobile智能手機(jī)上顯示的5GUC和5GUW圖標(biāo)的含義。這兩種標(biāo)志代表著不同的5G技術(shù)，每種技術(shù)都有其獨(dú)特的特點(diǎn)和優(yōu)勢(shì)。通過(guò)了解這些標(biāo)志的含義，用戶可以更好地了解他們所連接的5G網(wǎng)絡(luò)類型，以便選擇最適合自己需求的網(wǎng)絡(luò)服務(wù)。5GUCVS5GUW圖標(biāo)在T
PPT幻燈片插入excel圖標(biāo)的操作方法
Mar 26, 2024 pm 05:40 PM
1、打開(kāi)PPT，翻頁(yè)至需要插入excel圖標(biāo)的頁(yè)面。點(diǎn)擊插入選項(xiàng)卡。2、點(diǎn)擊【對(duì)象】。3、跳出以下對(duì)話框。4、點(diǎn)擊【由文件創(chuàng)建】，點(diǎn)擊【瀏覽】。5、選擇需要插入的excel表格。6、點(diǎn)擊確定后跳出如下頁(yè)面。7、勾選【顯示為圖標(biāo)】。8、點(diǎn)擊確定即可。
如何更改Kali Linux默認(rèn)的whisker菜單圖標(biāo)?
Jan 04, 2024 am 09:05 AM
KaliLinux怎么給whisker菜單按鈕更換圖標(biāo)，今天我們就來(lái)看看linux系統(tǒng)更換whisker菜單按鈕圖標(biāo)的教程。1、默認(rèn)whisker菜單圖標(biāo)，如下圖所示。2、在whisker菜單圖標(biāo)上右鍵選擇【屬性】。3、切換到【面板按鈕】選項(xiàng)卡，找到【圖標(biāo)】選項(xiàng)并單擊。4、在新窗口，點(diǎn)擊自己喜歡的圖標(biāo)。5、選擇完成后，點(diǎn)【關(guān)閉】退出設(shè)置。6、之后就可以看到新更改的whisker菜單鈕圖標(biāo)了。
如何在iPhone中撤消從主屏幕中刪除
Apr 17, 2024 pm 07:37 PM
從主屏幕中刪除了重要內(nèi)容并試圖將其取回？您可以通過(guò)多種方式將應(yīng)用程序圖標(biāo)放回屏幕。我們已經(jīng)討論了您可以遵循的所有方法，并將應(yīng)用程序圖標(biāo)放回主屏幕如何在iPhone中撤消從主屏幕中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復(fù)此更改。方法1–替換應(yīng)用程序庫(kù)中的應(yīng)用程序圖標(biāo)您可以直接從應(yīng)用程序庫(kù)將應(yīng)用程序圖標(biāo)放置在主屏幕上。第1步–橫向滑動(dòng)以查找應(yīng)用程序庫(kù)中的所有應(yīng)用程序。步驟2–找到您之前刪除的應(yīng)用程序圖標(biāo)。步驟3–只需將應(yīng)用程序圖標(biāo)從主庫(kù)拖動(dòng)到主屏幕上的正確位置即可。這是將應(yīng)用程序圖
