uni-app项目中，引入iconfont图标没有效果的总结

最新推荐文章于 2024-09-15 22:44:12 发布
最新推荐文章于 2024-09-15 22:44:12 发布
阅读量4.9k 收藏
点赞数 1
分类专栏： uni-app 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu893100/article/details/106206061
版权

实现效果：
在这里插入图片描述
发现没有任何效果，于是查看代码发现在这里插入图片描述
自己习惯性的添加了scoped属性，scoped是为了避免其他页面样式命名重复的问题，在App.vue中引入导致其他页面无法使用该页面的样式，从而导致效果无法显示。
在这里插入图片描述
效果：在这里插入图片描述

dream_reason
关注
专栏目录
icon图标无法显示
Bamboo_shui的博客
02-16 3494
开发java web项目时icon图标没办法显示 或 图标没有正常显示 或 图标有时出现有时不出现，如图 我的解决方法 1、可能还没有从网络上下载下来--连网等待下载（若是被拦截，可能下载下来也会被拦截） 2、可能被拦截了，没有进行过滤 在web.xml的过滤的忽略过滤值加上 *.ttf|*.woff|*.svg|*.eot
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 588
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
uniapp引入iconfont无效的解决
weixin_46732970的博客
10-11 1515
uniapp引入iconfont
uniapp导入iconfont报错的处理方法Uncaught Error: Cannot find module ‘./common/iconfont.woff2?t=1726398902942‘
最新发布
峰会路转的博客
09-15 311
控制台报错消失了，说明我们的配置生效了。
关于uni-app App-plus中iconfont图标的引入没效果，博主踩过的坑
梦之所以
05-19 5225
在做项目的时候，我们可能习惯性的会选择font-class类型 然后在线拷贝css文件，添加到项目文件中，结果到了app-plus时，发现还缺少ttf文件的引入 "buttons": [{ "fontSrc": "/static/iconfont.ttf", "text": "\ue66e", "fontSize": "26", "color": "#fff", "float": "left", "backgr
【unaipp】tabBar配置/tabBar图标无法显示
Xiang_Gong_Ya_的博客
10-25 2578
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
解决uniapp在安卓真机iconfont不显示问题
FUFCY的博客
05-10 1721
在引入iconfont.css里的@font-face的src: url的//at加上 https: 就可以了
uni-app接入iconfont图标库
09-12
9. 最后，编译运行uni-app项目，就可以在页面中看到使用了Iconfont图标库的效果了。 以上就是在uni-app中接入Iconfont图标库的简单步骤。 ### 回答3： uni-app是一个跨平台开发框架，可以方便地开发出同时适用...
uni-APP项目开发
m0_71540335的博客
06-14 1517
在项目中manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。阮一峰的flex教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。Vue官网：https://cn.vuejs.org/v2/guide/static静态资源目录，例如图片等。
uni-app开发介绍
b523606163的博客
05-26 3390
在学习uni-app前，建议开发者先学习Vue.js框架，因为uni-app基于Vue.js框架开发。若您已经熟悉Vue.js，则可以开始学习uni-app了。uni-app使用HTML、CSS和JavaScript编写应用程序，您可以通过使用Vue.js的语法以及Uni-app提供的组件和API来构建应用程序。在学习uni-app时，建议同时了解应用开发的相关知识，如应用的生命周期、页面布局、事件绑定及其响应等。这些知识将帮助您更好地理解Uni-app的实现原理和应用开发流程。
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 957
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
引用iconfont图标无效，实际是因为全局引入css时位置错误
gjylalaland的博客
11-15 1058
引用iconfont图标无效，实际是因为全局引入css时位置错误
项目图标不生效问题
mezheng的专栏
12-05 1038
/core/shell/images/logo.ico" rel="shortcut icon" /> 加入该段后，图片并未展示出来。 先后删除服务器缓存，浏览器缓存还是不行。 最后重复以上操作，再点击重新加载，解决问题。
uniapp引用全局样式不生效
10-24 4388
MacOS 使用HBuilder 编辑器 开发uniapp 样式不生效解决办法
解决uni-app无法使用icon-font彩色图标(Symbol方式)
FantasyWeirdo的博客
07-08 1991
解决uni-app无法使用icon-font彩色图标(Symbol方式)
在uni-app中引用iconfont,和遇到图标引入不显示的问题记录
weixin_42674490的博客
06-30 2563
1.在iconfont.css中，需要使*~@* 将路径添加完整 如： @font-face { font-family: "iconfont"; /* Project id 2642111 */ src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'), url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
关于 uniapp 中，自定义的icon不显示
qq_40652539的博客
06-13 3334
在开发 时，需要引入 中的我们自己的字体图标库时，我按照以往在 中的引入方法并结合 官方提供的步骤，一步一步走下来，结果发现字体图标不显示，而且需要修改的文件地址也是正确的，通过查看元素样式，发现字体类已经生效，于是我打开本地的浏览器再看，发现在本地浏览器下，自定的图标库是可以显示的，但是在 内置浏览器下不显示； 这就怪了… 于是我就不再使用我们自己的字体，而是按照官方的步骤，从添加开始，到自己创建项目，一步一步，一步一步…最终引入到项目中去，竟然发现，在内置浏览器下是可以正常显示的； 经过这次的引入，我从
uni-app引入iconfont App不显示H5正常问题
qq_24343389的博客
01-13 2933
1、iconfont 地址 https://www.iconfont.cn/ 2、引入方式 离线引入： 加入字体图标下载iconfont包 修改iconfont.css文件，data:application/x-font-woff2;charset=utf-8;base64,后面内容是下载的iconfont.ttf转为base64的内容 引入到uni-app项目中，并在App.vue页面引入 @import "./common/iconfont/iconfont.css"...
uniapp引入iconfont，app端不显示问题
Y00010010的博客
03-13 3394
uniapp项目引入iconfont，app端不显示问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dream_reason

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值