uniapp中引入iconfont字体图标库

最新推荐文章于 2025-11-08 10:30:47 发布

原创最新推荐文章于 2025-11-08 10:30:47 发布 · 437 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js

本文介绍如何在uni-app项目中集成iconfont图标字体资源。主要包括下载图标压缩包并放置到项目静态文件夹、修改iconfont.css文件引用路径、在项目中导入图标样式文件以及在Vue文件中使用图标的具体步骤。

1、首先下载iconfont图标压缩包，将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2六个文件放进uniapp静态文件static中的fonts文件夹下
2、修改iconfont.css中引入文件的方式

将里边所有src: url('iconfont.eot')
改成src: url('~@/static/fonts/iconfont.eot')

3、在项目中通过

@import  url('./static/icons/iconfont.css')

4、在vue文件中直接使用即可

<view class="iconfont icon-xxx"></view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

feifeifeiCSND

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）

高桥留de博客

12-07

1441

uniapp正确引入本地iconfont（阿里图标库）

uniapp 中引入 iconfont 文件报错文件查找失败：‘./iconfont.ttf?t=1666846147194‘

jiangjunyuan168的博客

10-27

4067

iconfont.css 文件中的引用图标的默认路径错误，对该路径进行修改即可。/*每个页面公共css */

参与评论您还未登录，请先登录后发表或查看评论

uni-app的图标插件

01-14

导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用在需要插入的页面引用  或者class直接引用

UniApp 全局使用字体教程

weixin_47873655的博客

11-08

875

UniApp 全局字体设置指南在 UniApp 项目中实现全局字体统一： 1️⃣ 将字体文件（如 YouYuan.ttf）放入 /static/fonts/ 目录 2️⃣ 在 App.vue 中通过 @font-face 注册字体 3️⃣ 设置全局样式 font-family: 'YouYuan' 4️⃣ 注意不同平台路径写法差异（H5用/static/，App用@/static/） 5️⃣ 遇到问题可排查路径、文件名或重新打包 6️⃣ 支持单独页面使用或全局应用 ✨ 完成设置后，项目所有页面将统一显示指

uniapp 引入iconfont字体图标

weixin_49752665的博客

04-08

336

如报错，将// 改为 https://每次更新下载新图标，这两处都会变。

----uni-app之原生头部上使用iconfont字体图标----

weixin_33910385的博客

04-25

1126

UNI-APP添加顶部导航栏并且更换图标 uni-app是一个使用Vue.js开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。记录一下更换顶部导航栏的流程最终效果图在page.json里的配置项 { ...

uniapp引入字体图标库

weixin_43709908的博客

04-17

917

步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹，将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图标的引入，在页面中就可以进行使用了 ...

uni-app引入iconfont字体图标

mbf_running的博客

07-29

246

本文介绍了两种在项目中引入阿里巴巴矢量图标库的方法。本地引入方式需下载图标文件，修改CSS路径后全局引入；在线引入则直接使用CDN链接。操作步骤包括文件放置、路径修改和全局引用，并提供了代码示例。注意事项涵盖路径检查、图标更新和样式自定义，最后给出了完整的本地引入实现示例。两种方法各有优势，推荐本地引入确保离线可用性。

uniapp中如何引入iconfont图标库

08-29

根据用户的问题，用户想知道如何在uniapp中引入iconfont图标库。参考提供的引用内容，以下是步骤总结： 1. **在Iconfont阿里矢量图标库创建项目并添加图标**： - 访问[Iconfont官网](https://www.iconfont.cn/)，...

uniapp引入两个iconfont图标库

最新发布

12-05

- 它说：“uniapp引入iconfont真机APP不显示问题解决”，但没有给出细节。我需要基于常识回答。 - 常见原因：字体文件路径不正确，webpack不处理static目录下的文件。 - 解决方案：使用绝对路径或base64编码字体。 ...

让uniapp小程序支持多色图标icon：iconfont-tools-cli

meteorites的博客

01-20

3334

让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理

uniapp添加iconfont字体

soos的博客

08-04

385

uniapp也可以使用iconfont字体，关于iconfont怎样下载参考：iconfont图标字体下载下载好之后将iconfont.css和iconfont.ttf复制到项目的static文件夹下， 1.修改iconfont.css中字体的路径（如src: url('~@/static/iconfont/iconfont.ttf') format('truetype');）。 2.在App.vue中引用iconfont.css， @import ''（全局样式，以便多个页面使用）。 3.添加.

UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）

weixin_53221528的博客

12-28

1108

UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）

【uni-app】使用iconfont字体

Erin_jwx的博客

08-11

340

第一步搜索需要的图标，选择图标添加入库第二步网页导航栏的右上角点开购物车，查看已入库图标第三步新建项目，尽量把同一个项目中用到的图标放在一起第四步将图标下载至本地，解压第五步将以下两个文件导入到项目的static下第六步修改iconfont.css文件代码如下 @font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf'); } 第七步在App.vue中引

uniapp中使用 iconfont字体

hjh15827475896的博客

05-20

956

5. 使用iconfont 使用 iconfont 有两种方式，一种是 class 方式，一种是使用 unicode 的方式。5.2 使用 unicode 的方式。5.1 使用 class 的方式。

uni-app引入阿里字体图标库

qq_41578884的博客

08-26

681

1.官方地址 2.阿里巴巴字体图标库使用方法（1）.注册账号（2）.创建项目（3）.找到喜欢的图标（4）.将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地（6）.将iconfont.css复制到项目中去（7）.在app.vue引入 /* 引入的字体图标 */ @import './common/iconfont.css'; （8）.使用 <view class="iconfont icongengduo icon "></view> ...

uni-app中使用iconfont字体图标

asteriaV的博客

03-24

2276

在一些项目中，我们需要使用阿里巴巴矢量字体图标库的图标，如果单个下载势必过于麻烦，这个就是自己创建好然后进入即可。第一步，找到阿里巴巴矢量字体图标库，登录官网把你需要的图标添加至购物车，创建项目第二步，进入项目，首先选择Unicode,然后点击下载至本地第三步，找到该文件，解压，然后把该解压好的文件放到所需项目的static文件里第四步，找到你刚才引入的图标文件（i...

uni-app引入字体图标详细步骤

果冻

11-01

6705

之前自己做学习中不会引入矢量图，在网上搜索方法，没找到哟个详细的，自己动手记录一下， uni-app引入字体图标 1、在案例矢量图官网选择需要的图标进行下载 2、得到如下文件 3、将将文件中的六个文件放进项目里面，就是下面截图的那六个即可 4、在全局App.vue中引入引入后会报如下错误 5、解决方式进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就号了。 6、按照如下图的修改方式即可解决 7、然后就可以在页面正常使用了在下载的字体图标的文件中店