小程序引入icon的三种方式

2024-05-20 03:00:30

小程序引入icon的三种方式（原生图标、WeUI图标组件、iconfont图标）

原生图标

小程序里原生图标是通过icon标签来引入的：
<icon type="success" size="24" color="green" />

WeUI图标组件

WeUI 是一套同微信原生视觉体验一致的基础样式库，基于小程序自定义组件构建，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。要使用WeUI组件，我们需要到组件下载页面去下载icon组件。WeUI组件库

下载完成后我们会得到一个icon文件夹，里面有四个文件：icon.js, icon.json, icon.wxml,icon.wxss，我们在项目根目录下创建一个components文件夹，再将icon文件夹拷贝进去，然后在app.json中增加以下配置：

"usingComponents": {"mp-icon": "components/icon/icon"
},

示例代码：

<!--WXML示例代码-->
<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
<mp-icon icon="add" color="black" size="{{25}}"></mp-icon>

效果图：
组件库里icon图标列表参考链接。

iconfont图标

从阿里的图标库下载需要的图标。

解压下载下来的download.zip文件，将其中的iconfont.css文件拷贝到小程序中，重命名为iconfont.wxss,打开iconfont.wxss文件：

由于小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64。打开Online @font-face generator 上传字体,选择base64编码,Convert后下载。
将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的iconfont.css文件中,替换@font-face。

打开app.wxss,在首行引入iconfont.wxss(./styles/iconfont.wxss为文件的路径)：

/**app.wxss**/
@import './styles/iconfont.wxss';

在视图文件中，我们通过以下方式显示图标：
<icon class="iconfont icon-shezhi" />
效果图：

小程序引入icon的三种方式相关推荐

uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
重要背景说明官网iconfont的引入方式有三种分别为:Unicode.Font class.Symbol, 其中已明确说明 Unicode.Font class 这两种引入方式不支持多色. 单色 ...
小程序可通过这三种方式去做竞品分析
随着互联网+小程序的深入和技术的革新,互联网行业早已不是纯互联网产品的行业了,我们的竞争对手也不仅限于同行,因此竞品分析的视野也要放大到各行各业.那么竞品的分类有哪些?我们应该如何去选择? 1. 直接 ...
微信小程序页面跳转三种方式
为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式. 页面跳转的话就涉及到了多个页面层级第一种:wx.navigateTo(OBJECT) 保留当前页面 ...
CSS初学之引入css的三种方式（一）
1.引入css的三种方式一.第一种简介第一种:行内样式每一个元素都具备style属性,通过该属性可以设置元素的相关样式缺点: 复用性不高,样式更新麻烦不复合网页标准,h ...
CSS 引入 HTML 的三种方式
CSS 引入 HTML 的三种方式在 html 文档中引入 CSS 样式表有三种引入方法: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 一.内部样式表内部样式表(内嵌 ...
细数小程序获量的6种方式和常见问题
2018年1月"跳一跳"小程序游戏的火爆,直接带来了2018年的一波小程序行情.4月开始就陆续有客户询问小程序推广方面的问题,那会儿大家都还懵懵懂懂,一些基本的推广信息还不知道在后 ...
启动另外的一个应用程序的Activity（三种方式）
[java] view plaincopyprint? <span style="font-family:SimSun;"></span><pre n ...
微信小程序获取openid的两种方式
这篇文章是关于获取openid的两种方式,自己在学着用微信小程序来写一个小东西玩首先我们要到小程序官网获取到自己的appid和Appsecret 如图第一种:直接在微信小程序中获取,不需要通过后台 ...
抓取微信小程序数据包的三种方法
前言做安全测试的都会遇到测试某微信小程序,而微信小程序基本都是基于HTTPS的,所以抓取HTTPS数据包就是最关键的一步.最近几天折腾了一下,整理了比较简单.方便的三种方法. 条件抓取微信小程序数 ...

最新文章

热门文章