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

分类：uni-app

icon

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

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

(2).使用字体编码

5 赞关注分享

11 个评论

要回复文章请先登录或注册

1***@qq.com

可以用，牛

2022-10-18 14:04

差得多先生

我之前是阿里DNS外链，最近阿里外链出问题了，然后像这样下载文件引入，引入之后所有项目的体积都增大了。。。

2022-06-21 13:26

perrydpp

太感谢了，看了很多个方案还是你的最靠谱！

2021-04-03 16:28

2***@qq.com

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

2020-10-22 22:04

4***@qq.com

直接报错了

2020-07-14 19:59

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