iconfont在低版本手机中不显示的问题

最新推荐文章于 2024-07-30 13:59:38 发布

原创最新推荐文章于 2024-07-30 13:59:38 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了在CSS中加入iconfont.ttf字体文件的操作，给出了字体文件路径的格式代码，如src:url('../fonts/iconfont.ttf') format('woff')等，同时提到要在CSS文件中修改路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src:url('../fonts/iconfont.ttf') format('woff');
src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

加入iconfont.ttf字体文件，然后在css文件中改一下路径。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水瓶座的少女

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

QQ小程序模拟器上一切正常能显示，但是打包发布后iconfont图标全消失不显示的解决办法

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

05-16

135

模拟器图标正常发布后图标全部消失控制台没有报错那别犹豫，很可能就是 QQ 小程序不识别这种写法，必须写成才行！

uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）

高级前端工程师

02-01

2340

uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un

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

【React】在移动端使用iconfont图标库

Handsome_gir的博客

12-12

857

如果有项目可以直接选择需要添加的项目，没有的需要新建项目存放到项目中。5、在react项目中，打开public/index.html。4、确定之后进入我的项目中，选择Symbol，点击复制代码。2、点击右上角的购物车，将购物里的图标添加到项目中。3、点击添加项目就会有选择的项目，选择后保存。1、首先将需要的图标加入购物车。6、使用iconfont图标。

修复钉钉小程序 iconfont在android客户端无法正常显示

CloudJay的博客

10-18

3935

文章目录问题原因解决方案1.使用base64内联字体文件2.使用https路径的字体文件问题之前发过一篇教程:如何在钉钉小程序使用iconfont 在项目开发完成后,测试时,发现在android上iconfont不会生效原因在请教了钉钉的大佬后,得出原因,低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排...

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题

张小斌

05-27

9332

element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。

解决uniapp在安卓真机iconfont不显示问题

FUFCY的博客

05-10

1981

在引入iconfont.css里的@font-face的src: url的//at加上 https: 就可以了

【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】

seeeeeeeeeee的博客

11-28

5427

为什么要使用阿里图标库：图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显

Android中正确使用字体图标(iconfont)的方法

09-01

在Android开发中，正确使用字体图标（iconfont）可以带来许多便利，比如简化资源管理、提高图标适应性。本文将详细介绍如何在Android项目中引入和使用iconfont。首先，了解字体图标的优势和不足：优点： 1. ...

解决uniapp使用阿里巴巴矢量图库，在移动端不显示的问题

B2689429488的博客

07-30

1401

icon-font,css

解决react antd design pro 二级图标不显示问题（v4版本）

weixin_44205155的博客

03-04

4617

解决react antd design pro 二级图标不显示问题（v4版本） 1、问题描述在项目路由配置中，对各个子路由配置icon属性，但是项目实际运行中并不能显示 { path: '/system', name: 'system', icon: 'icon-xitong', routes: [ { path: '/system/user', name: 'user',

08cms房产解决本地测试icon图标显示，服务器上不显示

04-15

08cms房产解决本地测试icon图标显示，服务器上不显示的代码

Android 中使用IconFont 例子

03-18

Android 中使用IconFont 的小例子，包含了icon字体库哦

icommon icon font 在android4.1版中不显示的问题解决方法

linuxzxl的专栏

03-16

828

由于系统编码和icommon 的icon font 的十六进制编码回发生一些冲突，导致在安卓低版本中不显示的问题。主要是以e6开头的图片字体的十六进制不显示。解决方法：方法一、直接在icommon官网将不显示的图片字体的十六进制编码改掉，e6开头的十六进制方法二、icommon官方已经发布了新的版本，使用新版本即可。

android 字体图标库,Iconfont图标库Android/IOS使用方法

weixin_33438788的博客

05-25

501

阿里巴巴图标超详细使用方法可以看下面这篇教程，本篇精准像素主要分享阿里巴巴图标在Android和IOS上的使用方法。相关信息直接上阿里巴巴图标使用教程，废话不啰嗦，Iconfont网站介绍看下面这篇介绍。[xxid]47,136[/xxid]第一步：打开官网阿里巴巴图标官网：https://www.iconfont.cn/第二步：登...Android使用方法1、下载iconfont字体图标2、复...

bootstrap data-loading-text 无效？No!

banfu2106的博客

12-15

840

bootstrap data-loading-text 无效？No! 作者原创，未经允许，拒绝转载。我们看见的“无效”其实是我们没有看见效果，并不是真正的无效，我在《bootstrap之状态按钮》中提到过的业务逻辑代码，执行时需要时间的，这个时间才会显示效果，由于我们写的业务逻辑代码执行时间太短，还没等我们看效果，效果就已经结束了。以下代码，我进行了延时1秒，相当于业务逻辑...

为什么我们放弃css sprite使用iconfont字体图标

weixin_34292287的博客

12-08

162

说在开头前面有一篇博客说道，项目中使用压缩和css sprite技术对图标进行分类和组合；但随着项目的不断完善，我们也遇到了很多问题： 1.如何对图标进行分类；刚开始还比较好，我们对图标进行分类，大概有银行卡图标一类，增删改图标一类，支付类型一类，等等。但随着，图标的不断增加和业务直接的交叉，发现分类变得很困难，渐渐失去耐心。如果，把所有图标集成到一张图；但是有这...

阿里图标库的 uni-icons不显示

最新发布

05-28

### 问题分析在使用 `uni-icons` 自定义图标时，如果遇到图标不显示的问题，通常与以下几个方面有关：字体文件加载失败、路径配置错误、或移动端与 H5 端的差异。根据提供的引用内容[^1]、[^2]和[^3]，以下是对问题原因及解决方案的详细说明。 --- ### 原因分析 1. **字体文件加载失败** 在移动端运行时，可能会出现 `Failed to load local font resource ... net::ERR_CACHE_MISS` 的错误，这是由于字体文件未能正确加载所致[^2]。 2. **H5 端与移动端显示差异** 在 H5 端能够正常显示图标，但运行在手机上却不显示。这可能是由于 ttf 字体文件大小超过 40KB 时，uni-app 不会自动将其转换为 base64 格式，导致移动端无法正确解析字体文件[^3]。 3. **路径配置错误** 如果 `iconfont.css` 文件中的字体路径未正确配置，或者未将 ttf 文件放置在正确的目录中，也可能导致图标无法显示。 --- ### 解决方案 #### 1. 确保字体文件正确加载 - 将从阿里巴巴矢量图标库下载的 `iconfont.css` 和 `iconfont.ttf` 文件放置在项目目录的适当位置（例如 `static/font`）。 - 修改 `iconfont.css` 中的字体路径，确保其指向正确的 ttf 文件位置。例如： ```css @font-face { font-family: 'iconfont'; src: url('/static/font/iconfont.ttf') format('truetype'); } ``` #### 2. 转换 ttf 文件为 base64 格式 - 当 ttf 文件大小超过 40KB 时，手动将其转换为 base64 格式，并更新到 `iconfont.css` 文件中。可以使用在线工具或脚本完成此操作。 - 示例代码如下： ```css @font-face { font-family: 'iconfont'; src: url('data:application/font-ttf;charset=utf-8;base64,你的base64编码字符串') format('truetype'); } ``` #### 3. 检查 `custom-prefix` 和 `type` 属性 - 确保 `custom-prefix` 和 `type` 属性的值与 `iconfont.css` 文件中的定义一致。例如： ```html <uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons> ``` - 注意：`type` 属性的值应与 `iconfont.css` 中定义的类名保持一致，去掉前缀 `.icon-`。 #### 4. 清理缓存并重新编译 - 在修改了字体文件或路径后，务必清理项目的缓存并重新编译，以确保更改生效。 --- ### 示例代码以下是一个完整的配置示例： ```html <template> <view> <uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons> </view> </template> <style> @font-face { font-family: 'iconfont'; src: url('/static/font/iconfont.ttf') format('truetype'); } </style> ``` --- ###