WeChat Applet
Mini Program Development
A brief discussion on how to introduce and use built-in and external icons in WeChat mini programs
A brief discussion on how to introduce and use built-in and external icons in WeChat mini programs
This article will introduce to you how to use the built-in icons and external icons in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Relevant learning recommendations: Mini Program Development Tutorial
Comes with its own icon
<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">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</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">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</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">用于表示等待，告知用户结果需等待</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">多选控件图标_已选择</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">多选控件图标_未选择</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">用于在表单中表示出现错误</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">单选控件图标_已选择</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">停止或关闭</view> <view class="icon-box-desc">用于在表单中，表示关闭或停止</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>
Alibaba icon library
After downloading to the local, decompress it and there will be a folder with a file name iconfont.css in it. Edit and copy the contents
@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"; } Open the WeChat developer tools, find app.wxss, and paste the content you just copied below
Quote the icon icon in wxml, for example, quote icon-guanliyuan:before This is an administrator icon
<icon class="icon-guanliyuan:before"></icon>
For more programming-related knowledge, please visit: programming teaching! !
The above is the detailed content of A brief discussion on how to introduce and use built-in and external icons in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to disable taskbar thumbnail preview in Win11? Turn off the taskbar icon display thumbnail technique by moving the mouse
Feb 29, 2024 pm 03:20 PM
This article will introduce how to turn off the thumbnail function displayed when the mouse moves the taskbar icon in Win11 system. This feature is turned on by default and displays a thumbnail of the application's current window when the user hovers the mouse pointer over an application icon on the taskbar. However, some users may find this feature less useful or disruptive to their experience and want to turn it off. Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another drawback is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. but
How to remove icons in Ubuntu start menu?
Jan 13, 2024 am 10:45 AM
There are many software icons listed in the Ubuntu system start menu. There are many uncommon icons. If you want to delete them, how should you delete them? Let’s take a look at the detailed tutorial below. 1. First enter the ubuntu desktop and click on the start menu under the left panel. 2. You can find a text editor icon inside, we need to delete it. 3. Now we return to the desktop and right-click the mouse to open the terminal. 4. Use the command to open the application list directory. sudonautilus/usr/share/applicationssudonautilus~/.local/share/applications5. Find the corresponding text editor icon inside. 6. Then go straight
Download the phone settings icon to the desktop 'Know in seconds: Steps to change icons for apps on Android phones'
Feb 06, 2024 pm 04:27 PM
In order to beautify their desktop, many users like to change their desktop themes regularly to keep them fresh. However, changing the theme will not change the icon of the third-party APP, and the personalized beautification is not thorough enough. If you're tired of the same app icons, replace them. Theoretically, if you want to change the icon for a mobile app, you usually need a ROOT system and some tools to unpack and replace the icon. But since the vast majority of mobile phones no longer support the ROOT system, we need to find other methods to achieve it. For example, some specific applications may offer the option to customize the icon, or personalize the icon through a third-party launcher. In addition, some mobile phone brands have also launched special theme and icon stores for users to choose and change icons. In major app stores,
What do the 5G UC and 5G UW icons on your T-mobile smartphone mean?
Feb 24, 2024 pm 06:10 PM
T-Mobile users have started noticing that the network icon on their phone screens sometimes reads 5GUC, while other carriers read 5GUW. This is not a typo, but represents a different type of 5G network. In fact, operators are constantly expanding their 5G network coverage. In this topic, we will take a look at the meaning of the 5GUC and 5GUW icons displayed on T-Mobile smartphones. The two logos represent different 5G technologies, each with its own unique characteristics and advantages. By understanding what these signs mean, users can better understand the type of 5G network they are connected to so they can choose the network service that best suits their needs. 5GUCVS5GUW icon in T
Xianyu WeChat mini program officially launched
Feb 10, 2024 pm 10:39 PM
Xianyu's official WeChat mini program has quietly been launched. In the mini program, you can post private messages to communicate with buyers/sellers, view personal information and orders, search for items, etc. If you are curious about what the Xianyu WeChat mini program is called, take a look now. What is the name of the Xianyu WeChat applet? Answer: Xianyu, idle transactions, second-hand sales, valuations and recycling. 1. In the mini program, you can post idle messages, communicate with buyers/sellers via private messages, view personal information and orders, search for specified items, etc.; 2. On the mini program page, there are homepage, nearby, post idle, messages, and mine. 5 functions; 3. If you want to use it, you must activate WeChat payment before you can purchase it;
How to insert excel icons into PPT slides
Mar 26, 2024 pm 05:40 PM
1. Open the PPT and turn the page to the page where you need to insert the excel icon. Click the Insert tab. 2. Click [Object]. 3. The following dialog box will pop up. 4. Click [Create from file] and click [Browse]. 5. Select the excel table to be inserted. 6. Click OK and the following page will pop up. 7. Check [Show as icon]. 8. Click OK.
How to Undo Delete from Home Screen in iPhone
Apr 17, 2024 pm 07:37 PM
Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram
How to change Kali Linux default whisker menu icon?
Jan 04, 2024 am 09:05 AM
How to change the icon of the whisker menu button in KaliLinux? Today we will take a look at the tutorial on changing the icon of the whisker menu button in Linux system. 1. The default whisker menu icon is as shown in the figure below. 2. Right-click on the whisperer menu icon and select [Properties]. 3. Switch to the [Panel Button] tab, find the [Icon] option and click it. 4. In the new window, click the icon you like. 5. After completing the selection, click [Close] to exit the settings. 6. Then you can see the newly changed whisker menu button icon.
