uni-app小程序 阿里巴巴字体图标兼容ios

已于 2022-03-28 18:42:55 修改
阅读量658 收藏 1
点赞数
分类专栏： uni-app微信小程序 文章标签： 小程序
于 2022-03-28 18:19:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mystery_Fan/article/details/123801813
版权

问题描述

提示：uni-app 小程序 阿里巴巴字体图标库不兼容
<icon class="iconfont icon-xuanze"></icon>

解决方案：

登录阿里巴巴字体图标库，进入我的项目，打卡要用的项目，点击项目设置，选上base64选上

兼容小程序 字体图标再ios中显示

把这块的代码复制到iconfont.css文件中

把这块的代码复制到iconfont.css文件中

记得修改这里的地址

记得修改这里的地址

Mystery_Fan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app小程序简单聊天.rar
12-15
【uni-app小程序简单聊天】是基于uni-app框架开发的一个轻量级聊天应用示例。uni-app是一个使用Vue.js开发所有前端应用的框架，它支持多端输出，包括微信小程序、支付宝小程序、百度智能小程序、QQ小程序、H5以及App...
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uniapp的坑--icon引用兼容问题
bad___man的博客
11-12 2034
阿里icon 阿里icon在引用的时候引用在线地址 @font-face { font-family: 'iconfont'; /* Project id 2906019 */ src: url('http://at.alicdn.com/t/font_2906019_2o88ik7i0vb.woff2?t=1636356450779') format('woff2'), url('http://at.alicdn.com/t/font_2906019_2o88ik7i0vb.wof
最新uni-app引入阿里字体图标,兼容小程序和web端等各大平台
wangdekai007的博客
11-30 359
最新uni-app引入阿里字体图标,兼容小程序和web端等各大平台 下载字体图标 复制下载好的字体图标文件到 uni-app 项目的 /static/iconfont 目录下 在main.js引入 字体图标的css文件 import "./static/iconfont/iconfont.css" 4. 打开下载的字体图标文件的demo.html文件,复制自己想要的图标类名,注意不带点!! 使用类名方式 5. 使用, 要自己添加前缀 iconfont 空格 粘贴复制好的类名 6. 效果 小
如何在uniapp中引入阿里字体图标
weixin_44302838的博客
09-01 329
在阿里字体图标里面点击下载到本地 然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/iconfont.css")//这是我的路径 这样做完运行一定报错,因为font文件夹下的iconfont.css的路径也要改才行。 @font-face { font-family: "iconfont"; /* Project id 2762090 */ src: url('~@/static/font/
uniapp 字体引入
MrHao_的博客
05-11 3375
uniapp 小程序引用字体 官方链接 我们用到的字体可能会很大，比如我用到的阿里普惠字体就有8M，这么大的字体不管是放服务器还是放小程序内都是很不友好的。 推荐一个压缩插件 font-spider font-spider会帮我们剔除不需要的文体 比如你需要某一个特殊字体，而项目中只有标题 分类啥的可以用到那就推荐你使用这个。比如我项目只用到大概五十多个字。 把文字写在html文件的div里面 在html页面引入自己需要的特殊字体 font-spider会根据你页面使用到的字体和文字去压缩 这样压缩完后，
uniapp——如何在项目中使用阿里字体图标
qq_51480864的博客
02-11 1327
如何在uniapp中使用阿里字体图标
uni-app小程序完整项目源码，可二次开发，发布
12-20
《uni-app小程序开发详解》 uni-app是一款基于Vue.js的多端开发框架，它允许开发者编写一次代码，就能实现跨平台应用的开发，包括微信小程序、H5、App等。本项目提供了一个完整的uni-app小程序的源码，适用于二次...
uni-app-小程序自定义底部菜单样式示例
08-12
首先，uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，就能运行在iOS、Android、H5、微信小程序等多个平台。在uni-app中，底部导航通常由`<navigator>`组件来实现，但默认样式可能无法满足所有...
uni-app微信小程序登录授权的实现
10-15
主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在iOS中使用icon font
weixin_33712881的博客
11-12 155
在开发阿里数据iOS版客户端的时候，由于项目进度很紧，项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容普通屏与Retina屏的设备，苹果要求每个背景图都要以两种尺寸存(a.png和a@2x.png)，这让设计师们增加了成本，因为他们每次都得出两份背景图标。现在在web开发上，icon font技术的应用很广泛，它不仅在解决多分辨率显示问题上很有成效，而且在使用它...
在uni-app中使用阿里巴巴图标库字体图标
gysea123321的博客
01-11 751
阿里巴巴图标库 添加图标、下载、引入的使用方法： 1、添加图标 2、下载到字体图标文件后，复制圈中的两个文件到static目录下： 3、新建一个自定义字体图标样式文件： font-icon.css 4、给font-icon.css添加内容 5、font-icon.css具体代码： @font-face { font-fami...
uniapp使用安卓系统的字体
qq_42877655的博客
10-13 1904
解决方法 解决方法是这个帖子里面原方的评论哪里得到的 解决办法 在uni.scss里面写个全局样式 view{ font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; } 扩展（这个是原理） 最标准的系统字体规范font-family ...
阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库
小小梁的博客
08-23 1981
一、下载阿里巴巴矢量图文件 1、阿里巴巴矢量图地址：https://www.iconfont.cn 2、也可以去搜索 阿里巴巴矢量图 （1）阿里巴巴矢量图页面 （2）打开图标库 （3）添加到库中 添加至项目 就是我们要用到的字体图标库文件 下载素材 就是可以自定义颜色和大小的图片 不如png,jpg,jpeg,svg什么的 下载代码 就是也是下载的的字体图标文件 格式不一样而已 ** 重点是我们添加至项目中** （4）添加至项目 （5）项目设置
uniapp引入iconfont
qq_37953045的博客
07-27 671
uniapp引入iconfont
博学谷 - CSS笔记18 - 字体图标
hecr_mingong的博客
05-25 191
5.文章参考链接 a. https://www.boxuegu.com/
uniapp引入字体
weixin_43467567的博客
07-21 4954
以阿里普惠字体为例，先从阿里图标矢量库下载好需要的字体。 把下面几个文件ctrl+c，放到static文件夹中之前给它新建一个fonts目录，在ctrl+v 如果项目需要的字体默认这个字体的话，给他搞成全局字体，在App.vue页面 引入字体文件 按照uniapp官方的方法，在路径前面加~@ 即可 在项目页面中text 组件中我给他使用了刚引用的字体类名： 很明显测试的字体是我想要的字体，它很nice ...
uniapp-字体图标使用-解决字体图标无法正常显示（IOS显示正文形/问号）
qq_34227291的博客
01-11 8445
前言：字体图标常用到的是阿里的iconfont，阿里的iconfont在IOS默认显示的基本是没有问题的，但是有时候图标显示不正常，比如：显示正方形、或者问号。在buttons引用的字体图标如果是固定的，不是动态修改一般是没有问题的，但是有的时候关系到字体图标的动态切换。在安卓上点击字体图标进行切换是正常的，在IOS就出现以上提到的正方形、或者问号。 这里就有一个坑了，下面是描述的是解决方~法 ...
记录下uniapp在nuve中引入字体图标在ios中的bug
qq_39596012的博客
05-18 529
记录下uniapp在nuve中引入字体图标在ios中的bug 1.首先在安卓中无任何报错引入方式如下。 beforeCreate() { // #ifdef APP-NVUE var domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { 'fontFamily': "texticon", 'src': "url('/static/chunleivideo/texticon.ttf')" });
uni-app 小程序 ios 安全区域适配
最新发布
09-05
在uni-app的页面配置文件（例如manifest.json）中，可以使用“safe-area”: true来开启安全区域适配，这样在编译成iOS小程序时，uni-app会根据设备的安全区域自动对页面进行适配。 总之，uni-app提供了方便灵活的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值