效果:



步骤:

1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目



2、在小程序中使用

新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。

iconfont这个前缀不是固定的,根据icon名字来,icon的前缀为my-icon-xxxx,那么前缀就是 my-icon

没有前缀或者设置了前缀,一般都是使用iconfont,根据项目视情况而定,这里以my-icon举例。

my-icon my-icon-fontxxx // 前缀 icon名

// 使用icon
<view class="fontxxx my-icon my-icon-fontxxx "></view> // 设置icon样式
.fontxxx {
font-size:30rpx;
color:blue;
}

上面演示的是已经引入了icon的情况,如果没有引入则需要在iconfont图标库下载图标至本地,然后将文件内部的iconfont.css更名为iconfont.wxss,放入到根文件夹的style中即可正常使用。

微信小程序项目中使用icon图标的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  3. 微信小程序项目实战之豆瓣天气

    概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...

  4. 微信小程序项目踩过的几个坑

    一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开 ...

  5. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

  6. 高仿Readhub小程序 微信小程序项目【原】

    # News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...

  7. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  8. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  9. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  10. 微信小程序项目使用npm安装vant-weapp的正确步骤,简单易懂!!

    微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --pro ...

随机推荐

  1. 数学建模经验分享会For浙商大管工学院

    数学建模介绍 数学建模与数学 数学建模和数学没有必然的关系 一个队里至少有一个数学较好 注重运筹学.统计学这两门课 数学建模做什么 时间:一般每年9月开学三周内 时长:3天3夜 目标:完成一份排版精美 ...

  2. 一个jsqlparse+git做的小工具帮我节省时间摸鱼

    背景 前些时间做了个小工具解决了团队内数据库脚本检验&多测试环境自动执行的问题,感觉挺有意思,在这跟大家分享一下. 工具诞生之前的流程是这样: 1.开发人员先在开发环境编写脚本&执行: ...

  3. 是时候考虑升级 JDK 17 了

    Spring,作为 Java EE 的事实规范,在2022年11月16日发布了最新的 6.0.0 GA 版本.这个版本是框架后续新生代的初始版本,拥抱持续创新的 OpenJDK 和 Java 生态.新 ...

  4. 【实时数仓】Day00:数据流程、课程内容、框架结构、知识点总结

    一.数据流程 1.离线数仓 2.实时数仓 二.课程内容 1.数据采集层(ODS) 2.DWD层与DIM层数据准备 3.DWM层业务实现 4.DWS层业务实现 5.ClickHouse 6.数据可视化接 ...

  5. USB限流,短路保护芯片IC

    USB口的输出电压一般是5V,在一些电源中,由于总电源5V是一个很大的总电源,再分别出很多路输出负载出来,例如5V10A,分成4个USB输出口,如果没加其他限流和保护的话,任意一个USB口的输出电流都 ...

  6. 项目完成小结 - Django-React-Docker-Swag部署配置

    前言 最近有个项目到一段落,做个小结记录. 内容可能会多次补充,在博客上实时更新哈~ 如果是在公众号阅读这篇文章,可以点击「查看原文」访问最新版本~ 这个项目是前后端分离,后端为了快,依然用我的Dja ...

  7. 【RocketMQ】主从模式下的消费进度管理

    在[RocketMQ]消息的拉取一文中可知,消费者在启动的时候,会创建消息拉取API对象PullAPIWrapper,调用pullKernelImpl方法向Broker发送拉取消息的请求,那么在主从模 ...

  8. DSS+Linkis Ansible 单机一键安装脚本

    DSS+Linkis Ansible 单机一键安装脚本 一.简介 为解决繁琐的部署流程,简化安装步骤,本脚本提供一键安装最新版本的DSS+Linkis环境:部署包中的软件采用我自己编译的安装包,并且为 ...

  9. Linux 环境中使用 LVGL

    之前有记录过在 esp32 中使用 LVGL 的笔记,需要的小伙伴可以了解一下,esp-idf 移植 lvgl8.3.3 我之前整理的学习资料:https://www.cnblogs.com/jzcn ...

  10. CH579(Cortex-M0)网络IAP升级介绍及问题解答--(持续更新) 网络升级

    CH579网络IAP升级的源码可以从码云(Gitee)上git clone下来. 码云地址:https://gitee.com/maji19971221/wch-ch57x 以下是一个朋友问的几个常见 ...