A brief discussion on how to introduce and use built-in and external icons in WeChat mini programs

青灯夜游
Release: 2021-07-21 10:17:30
forward
4623 people have browsed it

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.

A brief discussion on how to introduce and use built-in and external icons in WeChat mini programs

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>
Copy after login

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(&#39;iconfont.eot?t=1537179845858&#39;); /* IE9*/
  src: url(&#39;iconfont.eot?t=1537179845858#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
  url(&#39;data:application/x-font-woff;charset=utf-8;base64,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&#39;) format(&#39;woff&#39;),
  url(&#39;iconfont.ttf?t=1537179845858&#39;) format(&#39;truetype&#39;), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url(&#39;iconfont.svg?t=1537179845858#iconfont&#39;) format(&#39;svg&#39;); /* 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"; }
Copy after login

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>
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template