一、使用阿里巴巴图标库引入字体图标

  1. 阿里巴巴图标库：https://www.iconfont.cn/manage/index
  2. 选择合适的图标
  3. 收藏，在收藏中查看
  4. 选择：自己的项目
  5. 选择：第二个{font class}，复制类的地址，在网页中粘贴，选择所有，都知道项目中
  6. 在项目中创建：styles文件夹下创建iconfont.wxss文件
  7. 粘贴到 iconfont.wxss中，并保存。
  8. 在全局app.wxss中，引入“@import “./styles/iconfont.wxss”; ”。
  9. 在要引入的页面中：class一个类名："iconfont icon-hongshizi"
  10. 即可引入图标

小程序引入外部icon图标的更多相关文章

  1. 微信小程序引入外部字体（字体图标过大，引入外链）

    1.把字体放在服务器上,因为字体图标比较大,小程序只支持2m 2.字体加载 3.检测是否加载成功(可能会存在https和http问题,防止跨域)

  2. 微信小程序引入外部组件 iView Weapp

    iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址 ...

  3. 微信小程序引入外部js 方法

    步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 ...

  4. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  5. 小程序引入多个e-charts

    小程序引入e-charts图表 这里是狗尾草第一次发表掘金文章,日后望各位大佬多多支持~ 前言:运营助手,见名知意,没有图表数据的展示,看上去是有多空白.因此,俺们UI做了很好的交互,一个页面来了4个 ...

  6. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  7. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  8. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  9. 微信小程序引用外部js，引用外部样式，引用公共页面模板

    https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...

  10. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

随机推荐

  1. WPF如何构建MVVM+模块化的桌面应用

    为何模块化 模块化是一种分治思想,不仅可以分离复杂的业务逻辑,还可以进行不同任务的分工.模块与模块之间相互独立,从而构建一种松耦合的应用程序,便于开发和维护. 开发技术 .Net 6 + WPF + ...

  2. call与retn指令

    一. call指令 将call指令下一跳指令压入栈中 jmp跳转到call指令的地址 二. retn指令 pop指令将栈顶元素弹出存储 jmp跳转到该栈顶元素地址 retn n;表示再前两步操作的基础 ...

  3. WPF 在MVVM模式下应用动画

    一个简单的需求:当程序发生异常时候,在界面上动画显示异常信息. 这个需求看似简单,只需要try--catch到异常,然后把异常的信息写入界面就OK了. 但在MVVM时,就不是这么简单了.MVVM模式下 ...

  4. Xshell7 / Xftp7 永久免费，官网直连下载地址

    主要目的是让大家随时随地从官网下载Xshell和Xftp免费版(个人/家庭/学校免费) 最新变动:官方目前仅提供最新版以及上一个版本的软件下载!其他版本不提供下载 免费版5版本(最后一个版本,无任何限 ...

  5. [htmlayout] picture标签替代img, 解决更新图片数据后依然显示原图片数据

    在hl中, 你可能遇到过这样的情况.   给img标签设置了一个图片路径.   在软件使用过程中对这个路径的数据进行过重写, 删除等等 但img依然还是显示最初载入的图片数据. 解决办法: 用&quo ...

  6. Spring Boot 中使用 Poi-tl 渲染数据并生成 Word 文档

    本文 Demo 已收录到 demo-for-all-in-java 项目中,欢迎大家 star 支持!后续将持续更新! 前言 产品经理急冲冲地走了过来.「现在需要将按这些数据生成一个 Word 报告文 ...

  7. 【RocketMQ】事务实现原理总结

    RocketMQ事务的使用场景 单体架构下的事务 在单体系统的开发过程中,假如某个场景下需要对数据库的多张表进行操作,为了保证数据的一致性,一般会使用事务,将所有的操作全部提交或者在出错的时候全部回滚 ...

  8. Java 21新特性：Sequenced Collections（有序集合）

    在JDK 21中,Sequenced Collections的引入带来了新的接口和方法来简化集合处理.此增强功能旨在解决访问Java中各种集合类型的第一个和最后一个元素需要非统一且麻烦处理场景. 下面 ...

  9. oracle-查看oracle当前连接数，会话数

    查看当前系统允许的进程连接数:方法一: show parameter process; 查看processes一列 方法二: select name,value from v$parameter wh ...

  10. pandas处理大数据题目的操作

    1.用法:DataFrame.drop(labels=None, axis=0, index=None, columns=None, inplace=False) 2.参数说明: labels:要删除 ...