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

uniapp项目使用字体图标

news 2025/9/26 7:37:46

公司没有ui设计时需要字体图标可以在网上搜，主要使用阿里巴巴矢量图标库。

1. 选择图标

登录阿里巴巴矢量图标库，搜索想要的图标加入购物车，在资源管理中添加项目，将购物车中的图标添加到项目，点击下载直接将所有图标下载下来。说一个压缩包，解压放到项目合适位置。
在这里插入图片描述

字体图标使用说明（uni-app + Vue3）

本项目的字体图标文件位于 assets/font_icon/，包含 iconfont.css / .ttf / .woff / .woff2 / .svg 等资源。

全局引入

在 App.vue 中全局引入字体图标样式，保证所有页面与组件都可直接使用：

<script setup>
import '@/assets/font_icon/iconfont.css'
</script>

如果项目已通过其他入口（如 main.js）引入，则无需重复引入。

基础用法

直接使用图标对应的类名（示例类名：.icon-huidaodingbux）：

<text class="iconfont icon-huidaodingbux"></text>

调整大小与颜色：

<text class="iconfont icon-huidaodingbux" style="font-size: 24px; color: #333;"></text>

使用渐变色（H5 端常用）：

<text class="iconfont icon-huidaodingbux" style="font-size: 28px;background: linear-gradient(90deg, #FF0D01 0%, #FE634B 100%);-webkit-background-clip: text;background-clip: text;color: transparent;
"></text>

注意：部分小程序/APP 端对 background-clip: text 支持受限，若无效可改用纯色 color。

在组件中使用

例：

<template><view class="back-top"><text class="iconfont icon-huidaodingbux gradient-icon" :style="{ fontSize: iconSize + 'px' }"></text></view>
</template><script setup>
// 组件逻辑略
</script><style scoped>
.gradient-icon {background: linear-gradient(90deg, #FF0D01 0%, #FE634B 100%);-webkit-background-clip: text;background-clip: text;color: transparent;
}
</style>确保已完成“全局引入”，否则图标类名不会生效。## 常见问题（FAQ）- 图标不显示/是方块：- 确认 `assets/font_icon/iconfont.css` 已被引入；- 检查类名是否与 `iconfont.json` 中的名称一致（如 `.icon-huidaodingbux`）；- H5 端尝试清缓存或更新资源版本号以避免旧缓存。- 大小/颜色不生效：- 优先在标签上直接写行内样式，或提高选择器优先级；- 确认未被其他样式覆盖（如 `!important` 冲突）。- 渐变颜色无效：- `background-clip: text` 在部分端不支持，可退回纯色 `color`；- 也可通过图片图标或 SVG 方案实现渐变视觉。- 子包或离线包加载失败：- 确认字体文件路径及发行设置是否正确；- 在 `iconfont.css` 中的 `@font-face` 路径要与发布目录匹配。如需新增图标，重新下载资源后替换 `assets/font_icon/` 内文件，并保持类名一致即可。