神秘嘉宾
神秘嘉宾
  • 发布:2019-08-23 09:17
  • 更新:2022-10-18 14:04
  • 阅读:7402

使用本地iconfont阿里字体图标 无需转换base64

分类:uni-app

1.首先登陆iconfont官网,创建自己的项目,找到需要的图标加入购物车,然后添加到项目中
2.生成unicode ,点击下载至本地,解压
3.将解压后的文件放入static目录
4.修改为本地引入方式


5.使用时在App.vue中全局引入该文件@import "./common/iconfont.css";(根据该文件路径),即可以在各页面中使用
6.使用方法
(1).使用class渲染图标

(2).使用字体编码

5 关注 分享
_Circle 8***@qq.com GraceLeeau 2***@qq.com fanchangjian

要回复文章请先登录注册

1***@qq.com

1***@qq.com

可以用,牛
2022-10-18 14:04
差得多先生

差得多先生

我之前是阿里DNS外链,最近阿里外链出问题了,然后像这样下载文件引入,引入之后所有项目的体积都增大了。。。
2022-06-21 13:26
perrydpp

perrydpp

太感谢了,看了很多个方案还是你的最靠谱!
2021-04-03 16:28
2***@qq.com

2***@qq.com

引用阿里云字体图标出问题
之前项目一直没问题,后面增加了一些图标,就更新了阿里云图标下载了最新得font文件夹下来,老方法法是把路径改下。但是全部不显示了。一开始我们以为是代码问题检查了好久。发现不是呐。后来直接创建一个新得项目,导入旧得图标文件能显示,一导入新得又不显示了。
2020-10-22 22:04
4***@qq.com

4***@qq.com

直接报错了
2020-07-14 19:59
4***@qq.com

4***@qq.com

不显示哎
2020-07-14 19:59
呆狗的一生

呆狗的一生

```css
@font-face {
font-family: 'iconfont'; /* project id 1762957 */
src: url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.eot');
src: url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.woff') format('woff'),
url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1762957_s6xrfp5svi.svg#iconfont') format('svg');
}
```
我引入的是阿里的网络字体,图标在浏览器正常显示,运行到安卓手机后不显示,大佬们知道是怎么回事吗?
2020-04-17 21:01
x***@officemate.cn

x***@officemate.cn

大神问一下,iconfont下载的tff文件超过40k了,怎么在pages.json引入
2020-04-02 09:57
6***@qq.com

6***@qq.com

IOS为什么不显示ICON
2019-12-10 10:26
1***@qq.com

1***@qq.com

可以用,感谢楼主
2019-08-27 11:23