uni-app iconfont神坑各种方法都不对，直接粘贴在app.vue起作用

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量204 收藏
点赞数
分类专栏： css 文章标签： uniapp iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35434878/article/details/101640359
版权

bug记录

按照网上的方法各种尝试总是不对。

把字体图标css文件放在common里，然后在app.vue引，不知道怎么只出方框，图标就是不出来。

试过的方法包括1.转base64  2.https引  3.~@/static/引 总之就是不出来，不知道是什么原因。

最后我把iconfont.css里面的内容粘贴到App.vue 的style里图标出来了。

 

原因

突然知道原因了，原来引入改了原来是@import "./common/common.css",现在是@import url("common/common.css")。简直笑哭

 

墨迹斑斑的老墙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 1933
第一步： 你得拥有一个uniapp项目 第二步 点击iconfont官网 在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接 再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app引入iconfont字体图标
Moon Star
11-15 718
script： mounted() { const domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { fontFamily: 'iconfont', src: "url('/static/mapIconfont/iconfont.ttf')" }); } template： <text class="iconfont">&#xe920;</text> styl
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 443
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1728
1：创建/font/iconfont.css 在线方式： @font-face { font-family: "iconfont"; /* Project id 3266214 */ src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype'); } 离线方式： @font-face { font-family: "iconfont";
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 843
uniapp引入iconfont图标
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 2989
uniapp 引入iconfont的方法
uniapp框架-uni-app自定义导航栏-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uniapp框架-uni-app自定义底部导航栏-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uniapp框架-ChatRobot聊天机器人-uni-app项目源码-vue语法格式.zip
最新发布
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uniapp框架-商城小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
axhub插件一键复制iconfont图标
03-25
使用Axhub，可以做以下事： 1）可以一键复制iconfont图标到 Axure 2）可以在iconfont调整颜色或大小后再复制到Axure 3）可以复制到Axure后转换为svg，无损缩放及调整颜色 4）支持iconfont 200W+ 单色和多色图标
快速复制iconfont中的图标的小插件
04-17
安装之后可以直接从iconfont中直接复制icon，在线支持在iconfont调整大小颜色后在进行复制，非常便捷好用。 解压后直接拖拽到Google 浏览器即可安装
AxhubAssistant一键复制iconfont图标到Axure
12-17
AxhubAssistant一键复制iconfont图标到Axure。
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1614
uniapp中引入iconfont
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 9017
全：小程序中使用iconfont的三种方式
如何在uniapp项目添加iconfont图标
前端小陈的成长记录
06-05 487
uniapp项目添加iconfont图标
uniapp引入iconfont图标踩过的坑
wang5590的博客
07-14 586
在iconfont下载图标后引入到项目，这里要注意的是路径上要加上https: 不然无法显示 参考： https://www.cnblogs.com/ghc520/p/12006389.html 刚开始用的是unicode方式，然后发现这样写无效，他会直接输出字符而不是图标 <view class="iconfont">{{icon}}</view> export default { data() { return { icon:'&#xe654;',}
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 2185
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
uni-app 怎么在app.vue里设置全局变量，并在其他页面引用
05-25
在 `app.vue` 中，你可以通过 `Vue.prototype` 属性来设置全局变量，例如： ```vue <script> export default { created() { Vue.prototype.$globalVar = '这是一个全局变量' }, } </script> ``` 在其他页面中，你可以通过 `this.$globalVar` 来使用该全局变量，例如： ```vue <template> <div>{{ $globalVar }}</div> </template> <script> export default { mounted() { console.log(this.$globalVar) }, } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值