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使用即可

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值