当前位置: 首页 > 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.mrgr.cn/news/16055.html

相关文章:

  • 微分方程(Blanchard Differential Equations 4th)中文版Section5.6
  • 如何在3D无序抓取中应用深度学习算法?
  • Leetcode 剑指 Offer II 093.最长的斐波那契子序列的长度
  • 数字乡村振兴智慧农业整体规划建设方案
  • 关于一个早期对电子辐射的小讨论
  • 学习资料销售平台小程序的设计
  • vue.js项目实战案例源码
  • 盘点免费且靠谱的AI大模型 API,统一封装,任性调用!
  • LeetCode题集-1- 两数之和
  • 鸿蒙Next-拉起支付宝的三种方式——教程
  • 容器编排工具的选择:Kubernetes(K8s)与 K3s 的权衡与实践|Kubernetes|K3s|容器编排|资源受限环境
  • 基于Hutool 判断 日期是否 跨日,月,天
  • XSS LABS 靶场初识
  • 监控域名到期发送钉钉消息通知
  • 腾讯地图SDK Android版开发 9 覆盖物示例3点聚合
  • 基于STM32开发的简易自动驾驶系统
  • 音频如何低延时回声消除与降噪篇保姆级教程
  • Express Response类深度解析:全面掌握属性与方法,提升开发效率
  • 大模型技术如何重塑物流供应链
  • golang学习笔记——Gin、Beego、Iris、Echo框架学习资料