vue引入iconfont不显示

最新推荐文章于 2024-06-20 15:16:34 发布
原创 最新推荐文章于 2024-06-20 15:16:34 发布 · 684 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了当在线引入Iconfont后页面显示为方块的常见问题及解决方法。首先确保在全局app.vue中正确引入了Iconfont的CSS样式，然后在使用Iconfont图标的地方，如div元素内插入iconfont代码，并赋予class为'iconfont'。通过这些步骤，可以解决图标无法正常显示的问题。

引入在线iconfont后页面显示方块
解决方法：在app.vue中引入css样式与在线地址后
在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"

Vue引入使用iconfont字体图标
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
08-08 1288
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue项目中引入iconfont
2401_84152928的博客
05-07 1167
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
【VUE】vue引入iconfont不显示
SZnAl的博客
03-03 3190
引入在线iconfont后页面显示方块 解决方法：在app.vue中引入css样式与在线地址后 在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"
iconfont 图标不显示
weixin_48327767的博客
09-19 1579
vue项目中需要用到自定义图标之前一直都是通过引入静态样式文件实现最近用了一个新方式。
在vue项目中引入并使用阿里iconfont图标
Zoey_J的博客
12-22 860
打开官网 → 我的项目 → 下载到本地 → 解压缩下载的文件 解压后的文件夹： 将需要的文件拖入项目 将以下几个文件拖入项目，放到创建的文件夹中 将 .css 文件中的路径设置为与文件位置一致 这里我分了 css 和 icon 文件，也可以放一起怎么样都行，只要 .css 文件中的路径写对就没问题。 在 main.js 中引入 引入之后就可以在项目中引用项目中已有的图标了...
iconfont图标不显示的解决方式
m0_57342122的博客
04-18 3192
iconfont图标不显示的解决方式
Vue中使用iconfont字体图标转译问题导致的不显示
06-06 1468
导入字体图标后，正常使用时可以显示的，但是用到for循环里面，就会导致显示出错： 所以需要对编码进行转译操作：
vue项目使用iconfont的最佳实践
08-12
在Vue项目中，创建一个名为`Icon`的组件，接收`name`属性来决定显示哪个图标，并在组件内部处理图标引入逻辑。 7. **适配响应式** Iconfont的图标是基于字体的，因此天生支持响应式。通过CSS的`font-size`调整图标...
vue项目引入Iconfont图标库的图解教程
最新发布
11-18
本文将详细指导您如何将Iconfont图标库成功整合到您的Vue项目中，以实现自定义图标的需求。 首先，请访问阿里图标库（Iconfont）官方网站，浏览并选择所需的具体图标。 在挑选过程中，您可以将选定的图标加入购物车...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题
weixin_44934844的博客
09-21 1753
原因明确，但是本人着实不懂 打包的地址配置，截止编写此文，element-ui的字体图标没有得到解决，以至于下拉框等图标还是不显示。在项目的main.js引入的import 'element-ui/lib/theme-chalk/index.css’就不需要了；通过多方查找资料最后又回到了Vue CLI，解决的核心在于此文档URL 转换规则 ，根据文档我的理解是因为打包，element-ui的样式没有当做静态资源引用。上述的步骤，在 iconfont.cn官网的文档->symbol 引用有详细描述。
nvue页面使用iconfont遇到的问题
weixin_41623830的博客
04-23 515
之前 直接在js里面引用 然后写 <text class="nvue_iconfont">&#xe628;</text>就直接能显示出来了 今天新建了 一个 nvue页面 却显示不出来 在 css里面加了一句font-family:iconfont; 才可以 有大佬知道原因吗？ ...
Vue3+Element-plus icon图标不展示问题_vue3引入icon页面不显示(1)
2401_84435700的博客
05-16 658
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题
DJCBPL的专栏
09-19 3558
基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题，加载本地资源不成功问题
解决iconfont 图标不显示问题
热门推荐
ppx_mqj的博客
09-05 4万+
刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 所以这个时候你只需要将路径改成你项目结构中的路径即可，修改后： 2、路径配置好后怎样把你下载的图标引入到代码中 ...
nvue页面使用iconfont图标问题
weixin_55501516的博客
06-20 535
nvue页面使用iconfont图标在电脑运行到浏览器没有问题，真机调试的时候不显示问题
vue 打包上线后字体图标不显示
inticaler的博客
06-21 377
在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } 加上 publicPath: '...
Vue 使用 阿里巴巴 iconfont 没有显示问题
liulang1905的博客
05-19 2011
记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了 <!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入--> <link rel="stylesheet" href="/icons/iconfont.css"> <!-- 下载后的图标的class --> <span class="iconfont icon-zhankai"></span> 如
Vue项目打包后icon图标不显示
weixin_45274678的博客
12-28 3378
原因一：路径错误 也就是说实际应该通过 /static/fonts/ 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/，自然报 404 错误。 在build/utils.js找到以下代码 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else
vue引入iconfont js
03-19
### 如何在 Vue 项目中正确引入 Iconfont 的 JS 文件 要在 Vue 项目中正确引入 `iconfont.js` 文件并使用其中的图标，可以通过以下方式实现： #### 方法一：通过 `createFromIconfontCN` 动态加载 可以利用 Ant Design Vue 提供的 `createFromIconfontCN` 方法来动态加载 `iconfont.js` 文件。这种方式适合在线环境。 以下是具体代码示例： ```javascript import { createFromIconfontCN } from &#39;@ant-design/icons-vue&#39;; const IconFont = createFromIconfontCN({ scriptUrl: &#39;//at.alicdn.com/t/font_8fb87iudi.js&#39;, // 替换为你自己的线上地址 }); export default { components: { IconFont, }, }; ``` 上述代码会自动加载指定的 `scriptUrl` 地址，并将其注册为组件以便后续使用[^1]。 --- #### 方法二：本地化处理 `iconfont.js` 如果希望将 `iconfont.js` 文件作为静态资源嵌入到项目中，则需按照以下步骤操作： 1. **下载 `iconfont.js` 文件** 登录 [iconfont.cn](https://www.iconfont.cn/) 并进入对应的项目页面，复制生成的 JavaScript 链接内容保存为本地文件（如 `src/assets/iconfont.js`）[^2]。 2. **修改 `@font-face` 定义** 打开项目的 CSS 文件（通常命名为 `iconfont.css`），并将其中的字体路径更新为相对路径或绝对路径。例如： ```css @font-face { font-family: &#39;iconfont&#39;; src: url(&#39;/static/fonts/iconfont.eot&#39;); src: url(&#39;/static/fonts/iconfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), url(&#39;/static/fonts/iconfont.woff2&#39;) format(&#39;woff2&#39;), url(&#39;/static/fonts/iconfont.woff&#39;) format(&#39;woff&#39;), url(&#39;/static/fonts/iconfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;/static/fonts/iconfont.svg#iconfont&#39;) format(&#39;svg&#39;); } ``` 如果遇到 H5 或移动端无法正常显示的情况，可以在 URL 前添加协议头 `https:` 来解决兼容性问题[^3]。 3. **在 Vue 组件中引入** 将 `iconfont.css` 和 `iconfont.js` 添加至项目入口文件（如 `main.js`）。例如： ```javascript import &#39;@/assets/iconfont.css&#39;; // 引入样式表 import &#39;@/assets/iconfont.js&#39;; // 引入脚本 ``` 4. **使用图标类名** 在模板中直接应用对应图标的类名即可渲染图标。例如： ```html <i class="iconfont icon-example"></i> ``` --- #### 注意事项 - 确保 `iconfont.js` 文件已成功加载，可通过浏览器开发者工具查看网络请求状态。 - 若采用离线模式，请确认所有依赖的字体文件均已上传至服务器目录。 - 对于生产环境部署，建议优化静态资源路径以减少跨域访问带来的性能损耗。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值