uniapp 引入阿里矢量图标库的详细步骤及踩坑经历

首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图

点击右上角的购物车

添加到项目

这里有坑首先你不选中在线链接你是看不到
@font-face { font-family: 'iconfont'; /* project id 1987983 */ src: url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.eot'); src: url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.woff2') format('woff2'), url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.woff') format('woff'), url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.ttf') format('truetype'), url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.svg#iconfont') format('svg'); }

其次你不点击更新你家在购物车的最新图标是不能显示的

点击下载到本地

之后把iconfont.css放在自己的文件夹下

每一次新增图标这里必须修改否则新图标就无法使用

这里是直接下载下来的iconfont.css 原文件未修改引入css样式后会报错，所以此处必须修改为阿里矢量图标库的 @font-face

在app.vue中引入公共的css组件切记一定要把@font-face复制粘贴

这里有一个坑请注意这一块代码也是必须有的建议每一次新增图标之后从新拷iconfont.css文件因为没有这块图标也是不能实现的

所以步骤就是选择图标添加到项目下载到本地复制iconfont.css 再修改@font-face
最后在需要的页面使用
就ok啦

<text class="iconfont icon-xianxingbolang"></text>

最后提醒一下使用前加上iconfont 否则也会用不上

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历相关推荐

uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法简单方便阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
u-view2.0 引入iconfont（阿里字体图标库）详细步骤！
uView已通过大量的实践中,收集了用户最有可能需要用到的图标,见Icon 图标,但我们也相信,它肯定无法覆盖所有的场景和需求. 用户也可以使用标签的方式,自行引入字体图标,为何要通过扩展的方式集成呢 ...
uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式复制阿里矢量图标库->我的项目->Unicode-> ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历相关推荐

最新文章

热门文章