当前位置: 首页 > news >正文

UniaApp引入Iconfont

一、下载图标资源

  1. 登录到阿里巴巴矢量图标库(iconfont)官网(https://www.iconfont.cn/)。
  2. 找到你需要的图标并添加到购物车,然后点击购物车图标进入到管理界面,选择 “下载代码”。
  3. 在下载选项中选择 “Font class” 方式进行下载,解压下载后的文件。

下载.png

二、将图标文件复制到项目中

  1. 将解压后的 iconfont.css(复制到 UniApp 项目的合适位置)

文件移到目录文件夹下.png
2.官网把这个代码复制下来,替换iconfont.css的这段代码
复制代码2.png
替换.png

三、在项目中引入 CSS 文件

  1. 在需要使用图标的页面的 Vue 文件中或者在项目的全局样式文件中(如 App.vue 中的 style 标签内或者单独的全局 CSS 文件)引入 iconfont.css 文件:
/* 在 App.vue 的 style 标签中或者全局 CSS 文件中 */@import "./assets/iconfont/iconfont.css";

四、使用图标

在页面的模板(template)中,通过 class 来使用图标

<template><view><i class="iconfont icon-your-icon-name"></i></view></template>

其中 icon-your-icon-name 是你在阿里巴巴矢量图标库中对应的图标的类名。
通过以上步骤,就可以在 UniApp 项目中成功引入并使用 iconfont 图标了。

五、小程序底部使用

直接下载png使用即可

http://www.lryc.cn/news/431415.html

相关文章:

  • 面试题:软件测试缺陷产生的原因有哪些?
  • RabbitMQ 04 集群
  • axure9勾选多个删除,弹框显示多个中继器编号
  • Git 使用指南 --- 版本管理
  • C#进阶-ASP.NET实现可以缩放和旋转的图片预览页
  • 【小程序 - 大智慧】深入微信小程序的核心原理
  • Qt 去掉QDialog对话框的问号
  • 负载均衡 Ribbon 与 Fegin 远程调用原理
  • c/c++:CMakeLists.txt中添加编译/连接选项使用内存错误检测工具Address Sanitizer(ASan)
  • armbian cups 远程打印机 1022
  • three.js使用3DTilesRendererJS加载3d tiles数据
  • 坐牢第三十五天(c++)
  • Conda离线部署django
  • 1. Fabric.js安装使用
  • Excel中.xls和.xlsx文件格式的区别,及C++操作Excel文件
  • php实用命令
  • TypeError:未绑定方法
  • Java虚拟机(JVM)的架构和工作原理,字节码执行流程
  • 416.分割等和子集
  • python初始化一个三维数组
  • EI会议推荐-第二届大数据与数据挖掘国际会议(BDDM 2024)
  • RK3566/RK3568 Android 11 动态显示/隐藏下拉框
  • Android图片缓存工具类LruCache原理和使用介绍
  • 生活杂记1
  • go常用代码
  • 各种各样的正则表达式
  • WebRTC 基础
  • 半天攻略:用ChatGPT快速搞定高质量论文,从选题到完稿一站式指南!
  • 探索PDF的奥秘:pdfrw库的神奇之旅
  • 修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)