iconfont阿里图标库使用；iconfont显示为方框；iconfont阿里图标库，依赖文件只有.woff2没有.woff和.ttf文件；

原创已于 2023-04-06 17:03:53 修改 · 944 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-24 09:29:05 首次发布

css 专栏收录该内容

19 篇文章

订阅专栏

文章讲述了如何使用阿里图标库，包括选择图标、下载、引入项目以及处理文件格式问题。在项目迁移过程中发现缺少.woff和.ttf文件，解决方法是下载其他图标以获取这些文件并引入。

iconfont阿里图标库使用

1.进官网 iconfont-阿里巴巴矢量图标库选中图标加入购物车加入项目下载到本地文件

2.文件中的5个文件引入到项目中（如果已经有了重新引入的的话需要修改后三个文件名 css对应修改）

3.在main.js文件引入 iconfont.css文件

4.使用图标 iconfont必须加否则会显示为方框！！！！

iconfont 为必加属性
icon-online 为图标名字-->在iconfont.css中
server-card-status-online 类名 为了修改样式
<i v-if="item.status" class="iconfont icon-online server-card-status-online" title="在线"></i>

依赖文件只有.woff2没有.woff和.ttf文件

最近做项目迁移发现原文件中没有.woff和.ttf文件？？？

去官网再随便下载一个图标，里面生成的这俩个文件拷贝进来就可以了！

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

祝你今天也快乐

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【已解决】react 简书项目，全局引用后iconfont图标变成方块问题

超逸の学习技术博客

10-13

1903

背景最近，在做 react 简书项目时候，使用 iconfont 时，出现图标变成方块问题，想了想，应该没有什么问题啊，后面发现 styled-components 中创建全局样式替换成了 createGlobalStyle。解决 createGlobalStyle 时，需要导出当前全局样例，例如我的 iconfont.js 文件代码如下： import { createGlobalStyle } from 'styled-components'; /* 使用 reset.css 设置默认样式*/ ex

vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）

绝圣弃智-零的博客

04-23

6360

因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。先介绍下阿里巴巴矢量图标库iconfont：这个截图只显示了第一行的图标库，还有很多。也许，我们需要的，这里都有。有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。配置的主要是项目名称和图...

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

iconfont.woff2

11-26

iconfont.woff2

iconfont.woff

07-03

H5 html +css移动电商图标，不是很全面，用于仿京东、淘宝、苏宁

【求助】Mac在iconfont下载代码没有.woff等文件

Lilac_0215的博客

12-04

358

Mac在iconfont下载代码没有.woff等文件

解决iconfont下载的图标显示的是小方框

Sara0064的博客

01-03

8065

嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。第一步，我们先从iconfont粘贴一个线上链接。粘贴到项目中将图标名称粘贴到需要的位置结果我显示的图标是那么怎么解决呢。然后在我们vue3项目中public中Index.html中引入这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加

文件查找失败：'./iconfont.ttf?t=1761902716275' at App.vue:6 17:41:06.630 文件查找失败：'./iconfont.woff2?t=1761902716275' at App.vue:4 17:41:06.630 文件查找失败：'./iconfont.woff?t=1761902716275' at App.vue:5

11-01

2. 是否解压后把 `.ttf`, `.woff`, `.woff2`, `.css` 等文件放进 `/static/iconfont/`？ 3. 文件名是否完全一致？比如不是 `iconfont.eot` 或拼错？ > ⚠️ 注意：有些浏览器只支持 `.ttf`，H5 推荐保留 `.woff2` ...

@font-face { font-family: "iconfont"; /* Project id 4775725 */ src: url('iconfont.woff2?t=1761902716275') format('woff2'), url('iconfont.woff?t=1761902716275') format('woff'), url('iconfont.ttf?t=1761902716275') format('truetype'); } 这里报错

最新发布

11-01

- 但你很可能 **没有把 `iconfont.woff2` 等文件放在和 `App.vue` 同一级目录中** → 所以报“文件查找失败”。 --- ## ✅ 正确解决方案：使用 `/static/` 绝对路径 ### ✅ 推荐做法（适用于 H5 + 小程序 + App）...

Fallback font will be used while loading: http://localhost:64480/Content/ThirdParty/layui-2.11.4/font/iconfont.woff2?v=293 如何解决

07-25

目标：当加载 iconfont.woff2 字体失败时，能够优雅地使用备用字体，以确保页面的图标能够正常显示（即使显示为备用图标或字符）而不是出现方框或空白。分析： 1. 字体文件加载失败的可能原因：网络问题、文件...

uniapp 引入iconfont显示为方框

05-04

1. **字体文件路径错误**：如果 `iconfont.css` 文件中的字体文件路径设置不正确，浏览器将无法加载对应的字体文件，从而导致图标显示为方框[^2]。 2. **编码问题**：当使用 Unicode 方式调用图标时，可能会因为...

Vue 导入 iconfont图标显示方块

qq_36229552的博客

03-18

1158

琢磨很久，都不知道哪里有问题，然后重新写和粘贴代码走了一遍把iconfont图标，放进自己新建的iconfont.css里面 iconfont.css内容 @font-face { font-family: "iconfont"; src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot'); src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot?#iefix') f.

引入阿里巴巴iconfont页面显示小方块

2301_77708638的博客

02-28

371

1.首先看一下你的类名加没加 iconfont！然后再去排除文件引用问题！

vue引入阿里巴巴图标库并引用（引入图标显示为方框解决方法）

m0_71751187的博客

10-25

753

iconfont必须加上下面为对应图标。这里在app.vue中引用。

阿里巴巴图库下载的在线图标显示为方框的问题

qq_45802978的博客

03-10

2010

解决灵感来自博主 https://blog.csdn.net/MarhongBaLa/article/details/89165714?locationNum=10&fps=1 问题描述：在阿里巴巴下载的图标在项目中展示为空白方框，像这种过程： 1、添加图标到项目中，然后下载 2、解压之后的目录（我把iconfont改成icon了） 3、把icon.css放到项目中，，同时把iconfont.ttf放到static静态目录下，icon.css一打开就是这个样子。如果直接运行就会报错

关于使用iconfont图标总生成小长方形框的解决办法

ff_717的博客

02-12

2676

关于使用iconfont图标的时候遇到的各种问题

报错记录 | 使用iconfont 显示方块

虎鲸虎鲸

08-26

404

出现问题如图示，页面无报错信息参考问答： imooc 按被采纳回答修改后报错内容 Failed to compile ./src/App.js Attempted import error: 'GlobalStyle' is not exported from './style'. 解决办法 //App.js import { GlobalStyle } from './style';...

iconfont本地引入显示小方块问题

weixin_44705310的博客

09-03

2002

问题：本地引入icon，再次在项目中添加新的图标，重新下载文件，引入后页面图标都显示小方块。解决方法如图：将此段代码重新生成一下，复制到iconfont.css文件中。

nebular 引入iconfont 字体图标，图标渲染成了框框

zsy_1991的博客

04-13

757

问题描述 angular 项目，需要引入字体图标，在项目初始化的时候注册了字体，如下： this.iconLibrary.registerFontPack('iconfont', { iconClassPrefix: 'icon' }); 使用nb-icon 调用字体图标，如下： <nb-icon icon="" pack="iconfont"></nb-icon> <span>控制面板</span> 结果渲染成了框框，说明字体识别不出来。问题解决其

iconfont通过font class引入显示小方块bug

a1071626267的博客

09-29

1161

iconfont通过font class引入显示小方块bug