antbuster
antbuster
  • 发布:2018-07-30 14:57
  • 更新:2020-07-16 08:33
  • 阅读:33311

uni-app如何引入iconfont图标

分类:uni-app

以前5+APP正常,uni-app就不正常,同样的写法
uni-app中就出现【These relative modules were not found:】的异常,
如果font-face的路径改成绝对路径/comon/fonts/iconfont.ttf,虽然不出错,
但是不能正常识别。是Bug吗?

2018-07-30 14:57 负责人:无 分享
已邀请:
everyday666

everyday666

第一步新建css文件保存的目录。
内容如下:
@font-face {
font-family: 'iconfont'; / project id 968065 /
src: url('//at.alicdn.com/t/font_968065_ac2ubmzftu.eot');
src: url('//at.alicdn.com/t/font_968065_ac2ubmzftu.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.woff') format('woff'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.ttf') format('truetype'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.svg#iconfont') format('svg');
}

.iconfont {
font-family:"iconfont" !important;
font-size:40rpx;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 14rpx;
}
.icon-search:before { content: "\e60b"; }

.icon-tubiaozhizuo-:before { content: "\e606"; }

.icon-tubiaozhizuo-1:before { content: "\e607"; }

说明:@fontyliu@hotmail.com 为阿里图库unicode线上地址直接引入
.iconfont 直接复制上面的就行
before 为阿里图库fnot class 地址中文件。(复制地址直接打开连接,滚动到底部会有项目全部图标的class 如:.icon-search:before { content: "\e60b"; })

使用:
页面引入class文件。如@import "../../common/icon.css";

使用方式改变当前class 如con-search
<uni-icon type="" class="iconfont icon-search"></uni-icon>
//微信能用
//这个评论添加图片好像很麻烦。。。qq的载图直接能粘贴就好了

690929288@qq.com

690929288@qq.com

小程序本地引入阿里 iconfont.解决方案

  • 把iconfont.css 的全部代码 全部复制到App.vue文件style里,或者(在static目录下创建一个css文件,在main.js引入即可 import "./static/icon-font/iconfont.css")
  • 然后 删除 src: url('iconfont.eot?t=1562306471309'); / IE9 /
  • url('iconfont.woff?t=1562306471309') format('woff'),
  • url('iconfont.ttf?t=1562306471309') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ /
  • url('iconfont.svg?t=1562306471309#iconfont') format('svg'); / iOS 4.1- /
  • 只保留转为base64的 woff2的即可,像下面这样
  • 在其它页面使用方式 ,两种方式
<span class="iconfont icon-stared"></span>  
<span class="iconfont"></span>
<style>  
@font-face {font-family: "iconfont";  
  src: url('data:application/x-font-woff2  
charset=utf-8;base64,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') format('woff2');  

}  
.iconfont {  
  font-family: "iconfont" !important;  
  font-size: 16px;  
  font-style: normal;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
}  

.icon-qrcard:before {  
  content: "\e748";  
}  

.icon-stared:before {  
  content: "\e61e";  
}  

.icon-shopcar:before {  
  content: "\e65c";  
}  

.icon-xia:before {  
  content: "\e60c";  
}  

.icon-scan:before {  
  content: "\e60b";  
}  

.icon-close:before {  
  content: "\e606";  
}  

.icon-star:before {  
  content: "\e640";  
}  

.icon-you:before {  
  content: "\e614";  
}  

.icon-zuo:before {  
  content: "\e61f";  
}  

.icon-shang:before {  
  content: "\e71e";  
}  
</style>  
  • 也曾被人羡慕

    问下,为什么我按这个来可是图片全是变成空白,谢谢

    2019-08-20 15:10

Trust

Trust - 少说废话

微信小程序不支持本地字体,如果需要小程序的话, 只能使用网络路径资源。
如果不考虑小程序的话,静态资源需要放在特定的目录下。详细见文档:目录结构

如果依旧有问题或疑问,建议上传一个可以重现问题的 demo。

  • antbuster (作者)

    我把uni.ttf放到/static/fonts/uni.ttf,font-face的路径改成/static/fonts/uni.ttf,uni-icon uni-icon-eye还是显示X

    2018-07-30 15:55

  • Trust

    @navence@163.com:上传一个 demo 吧

    2018-07-30 16:04

  • antbuster (作者)

    回复 Trust:按http://uniapp.dcloud.io/matter说明是不支持本地字体图标的,但如果不需要微信小程序的话?可否支持本地字体图标,或者将来有计划支持呢?

    2018-07-30 16:53

DCloud_heavensoft

DCloud_heavensoft

注意看http://uniapp.dcloud.io/matter
>
字体图标:微信不支持本地字体图标。
替代方式1:不用图标改用图片,但失去了矢量和方便高亮变色的好处
替代方式2:字体文件放到服务器,从网络地址引用
替代方式3:将字体图标转换为base64格式字符串直接放到css里
特别注意:对于首页底部的原生tab,是在pages.json里配置,微信只支持图片不支持其他任何形式

  • antbuster (作者)

    如果不需要微信小程序呢?可否支持本地字体图标,或者将来有计划支持?

    2018-07-30 16:52

  • DCloud_heavensoft

    回复 antbuster: 单纯app的话,在v3编译模式下已经支持本地字体了

    2020-04-06 22:23

得推网络科技

得推网络科技 - PHP全栈开发,需要外包可以@我

用iconfont的远程图标就行了

  • 358954504@qq.com

    你好,我就是引入的iconfont,现在用不了,请问有解决方案没有

    2018-09-19 15:44

antbuster

antbuster (作者)

目前貌似只能转换成base64字符串才能原生APP和微信小程序共用呢

  • DCloud_heavensoft

    我说的那3种替代方式,都是可以多端的

    2018-07-31 17:42

934507451@qq.com

934507451@qq.com

使用远程图标,在app中网速慢的情况下会出现图标出现延迟

刘boss1688

刘boss1688

如果后期更换的话需要怎样更换啊,求帮忙

要回复问题请先登录注册