本篇文章為大家介紹微信小程式中自備圖示和外部圖示的使用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)
#自帶圖示
<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)原因而造成的負向結(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">強烈警告</view> ??????<view class="icon-box-desc">用于表示由于用戶原因造成的負向結(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">用于多選控件中，表示已選擇該項目</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">用于多選控件中，表示該項目可被選擇，但還未選擇</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">錯誤提示</view> ??????<view class="icon-box-desc">用于在表單中表示出現(xiàn)錯誤</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">用于單選控件中，表示已選擇該項目</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>
阿里圖示庫
下載到本機以後，解壓縮出來有一個資料夾，裡面有一個檔案名稱iconfont.css，編輯並複製其中的內(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"; }開啟微信開發(fā)者工具，找打app.wxss，將剛才複製的內(nèi)容貼到下面
在wxml中引用icon圖標(biāo)，例如引用icon-guanliyuan:before 這是一個管理員圖標(biāo)
<icon class="icon-guanliyuan:before"></icon>
更多程式設(shè)計相關(guān)知識，請造訪：程式設(shè)計教學(xué)！ ！
以上是淺談微信小程式中引入並使用自帶和外部圖示的方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11怎麼停用工作列縮圖預(yù)覽? 關(guān)閉滑鼠移動工作列圖示顯示縮圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統(tǒng)中關(guān)閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預(yù)設(shè)情況下是開啟的，當(dāng)使用者將滑鼠指標(biāo)懸停在工作列上的應(yīng)用程式圖示上時，會顯示該應(yīng)用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹?jǐn)_到他們的使用體驗，因此想要關(guān)閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人?？紤]到您將滑鼠懸停在該區(qū)域的頻率，您可能無意中關(guān)閉了重要視窗幾次。另一個缺點是它使用更多的系統(tǒng)資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過
如何在Ubuntu開始功能表中移除圖示？
Jan 13, 2024 am 10:45 AM
ubuntu系統(tǒng)開始選單裡面列出了很多的軟體圖標(biāo)，有很多不常用的圖標(biāo)，想要刪除，該怎麼刪除呢？下面我們就來看看詳細的教學(xué)。 1.先進入ubuntu桌面，點選左邊面板下面的開始選單。 2、裡面可以找到一個文字編輯器圖標(biāo)，我們要把它刪除了。 3.現(xiàn)在我們回到桌面直接滑鼠右鍵開啟終端。 4、使用指令開啟應(yīng)用程式列表目錄。 sudonautilus/usr/share/applicationssudonautilus~/.local/share/applications5、在裡面找到對應(yīng)的文字編輯器圖示。 6、接著直
閒魚微信小程式正式上線
Feb 10, 2024 pm 10:39 PM
閒魚官方微信小程式悄悄上線，在小程式中可以發(fā)布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等，有用好奇閒魚微信小程式叫什麼，現(xiàn)在快來看一下。閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項功能；3、想要使用的話必要要開通微信支付才可以購買；
下載手機設(shè)定圖示到桌面「秒懂：Android手機為應(yīng)用程式換圖示步驟」
Feb 06, 2024 pm 04:27 PM
為了美化桌面，許多用戶喜歡定期更換桌面主題，隨時保持新鮮感。不過，換主題卻不會更改第三方APP的圖標(biāo)，個性美化不夠徹底。如果你厭倦了千篇一律的應(yīng)用程式圖標(biāo)，不妨將它們替換掉。理論上，想為手機APP換圖標(biāo)，通常需要ROOT系統(tǒng)和一些工具來拆包裝替換圖標(biāo)。但由於絕大多數(shù)手機不再支援ROOT系統(tǒng)，我們需要尋找其他方法來實現(xiàn)。例如，一些特定的應(yīng)用程式可能提供了自訂圖示的選項，或者可以透過第三方啟動器來實現(xiàn)個人化圖示。此外，一些手機品牌也推出了專門的主題和圖標(biāo)商店，供用戶選擇和更換圖標(biāo)。在各大應(yīng)用程式商店中，
您的T-mobile智慧型手機上的5G UC與5G UW圖示的意思是什麼？
Feb 24, 2024 pm 06:10 PM
T-Mobile用戶已經(jīng)開始注意到，他們的手機螢?zāi)簧系木W(wǎng)路圖示有時顯示為5GUC，而其他業(yè)者則顯示為5GUW。這並不是拼字錯誤，而是代表不同類型的5G網(wǎng)路。事實上，營運商們正在不斷擴大他們的5G網(wǎng)路覆蓋範(fàn)圍。在這個主題中，我們將探討T-Mobile智慧型手機上顯示的5GUC和5GUW圖示的意思。這兩種標(biāo)誌代表著不同的5G技術(shù)，每種技術(shù)都有其獨特的特點和優(yōu)點。透過了解這些標(biāo)誌的含義，使用者可以更了解他們所連接的5G網(wǎng)路類型，以便選擇最適合自己需求的網(wǎng)路服務(wù)。 5GUCVS5GUW圖示在T
PPT幻燈片插入excel圖示的操作方法
Mar 26, 2024 pm 05:40 PM
1.開啟PPT，翻頁至需要插入excel圖示的頁面。點選插入選項卡。 2、點選【對象】。 3、跳出以下對話框。 4.點選【由檔案建立】，點選【瀏覽】。 5、選擇需要插入的excel表格。 6.點選確定後跳出如下頁面。 7.勾選【顯示為圖示】。 8.點選確定即可。
如何更改Kali Linux預(yù)設(shè)的whisker選單圖示?
Jan 04, 2024 am 09:05 AM
KaliLinux怎麼給whisker選單按鈕更換圖標(biāo)，今天我們就來看看linux系統(tǒng)更換whisker選單按鈕圖標(biāo)的教學(xué)。 1.預(yù)設(shè)whisker選單圖標(biāo)，如下圖所示。 2、在whisker選單圖示上右鍵選擇【屬性】。 3.切換到【面板按鈕】選項卡，找到【圖示】選項並點選。 4.在新窗口，點選自己喜歡的圖示。 5.選擇完成後，點【關(guān)閉】退出設(shè)定。 6.之後就可以看到新更改的whisker選單鈕圖示了。
如何在iPhone中撤銷從主畫面中刪除
Apr 17, 2024 pm 07:37 PM
從主畫面中刪除了重要內(nèi)容並試圖將其取回？您可以透過多種方式將應(yīng)用程式圖示放回螢?zāi)?。我們已?jīng)討論了您可以遵循的所有方法，並將應(yīng)用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復(fù)此變更。方法1–替換應(yīng)用程式庫中的應(yīng)用程式圖示您可以直接從應(yīng)用程式庫將應(yīng)用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應(yīng)用程式庫中的所有應(yīng)用程式。步驟2–找到您先前刪除的應(yīng)用程式圖示。步驟3–只需將應(yīng)用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應(yīng)用程式圖
