uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决。

最新推荐文章于 2024-07-19 11:23:25 发布

喜陈

最新推荐文章于 2024-07-19 11:23:25 发布

阅读量3.6k

点赞数 9

分类专栏： uniApp uView 前端技术文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_43807473/article/details/124303780

版权

前端技术同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

uniApp

8 篇文章 2 订阅

订阅专栏

uView

5 篇文章 0 订阅

订阅专栏

本文讲述了作者在项目中遇到阿里图标在H5端正常但在移动端不显示的问题，通过修改iconfont.css文件中的@font-face并添加HTTPS源，成功实现跨平台显示。还提到了之前在uniapp中遇到的日期选择问题和解决过程。

摘要由CSDN通过智能技术生成

今天写项目遇到使用阿里图标在h5端显示正常，到了移动端不显示的问题，找了很多解决方法，都没有成功，今天记录一下自己是怎么解决的。

刚开始把字体图标下载到本地的时候，报这个错误：

文件查找失败：'./iconfont.ttf?t=1650443681797'
文件查找失败：'./iconfont.woff2?t=1650443681797'
文件查找失败：'./iconfont.woff?t=1650443681797'

这个错误需要在 iconfont.css 文件夹下，把这几个 ./ 相对路径改为 @/ 绝对路径就不报错了，在H5端也会显示正常。

但是跑到移动端上又直接不显示了，搜了很多方法，都是说在原来的路径前边加上 https: 就可以解决，我刚开始以为是把绝对路径改为网络路径就可以了，原来想法错了，自己搞了半天才找到解决方法。我是这样解决的：

在阿里图标网站找到我的项目，把下面的代码复制到 iconfont.css 文件夹下，替换原来的@font-face对象，并在//前边加上https: 这样就完美解决了，H5，移动端都会显示！

@font-face {
  font-family: 'iconfont';  /* project id 3345075 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_3345075_awz8jo8jk2v.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_3345075_awz8jo8jk2v.woff') format('woff'),
  url('https://at.alicdn.com/t/font_3345075_awz8jo8jk2v.ttf') format('truetype'),
  url('#iconfont') format('svg');
}

感觉用了uniapp配合uView组件库之后一直都在踩坑，前几天遇到一个uView选择日期的时候返回的是时间戳，开始一直认为是我不会用uview，搜了时候才知道，返回的就是时间戳，需要自己处理。