uniapp开发App如何引入阿里巴巴矢量库图标

一、对阿里巴巴矢量库进行的操作

1、首先点进阿里巴巴矢量库（阿里巴巴矢量图标库官方文档 https://www.iconfont.cn/）
2、进行账号注册
3、选中想要的图标加入到购物车

4、点购物车会出现下面的页面，然后选择添加至项目

5、加入项目中选择你想要把图标添加到哪个项目中，如果没有要加入的项目（像我这种刚刚引入阿里巴巴矢量库这种情况）可以新建项目，新建项目名称最好与本身项目名称一致（方便查看），当然不一样也可以，影响不大，因为我们是要下载到本地的
6、点击确定，到下面的页面，发现下面已经存在了你想要添加的图标了

7、选中unicode，点击下载到本地，会生成一个压缩包将其进行解压缩。

8、我们需要下面四个文件放到我们的项目中

9、先不要关掉浏览器页面，下面还会用到阿里巴巴矢量库页面。
二、对项目进行的操作
1、我是在项目的common文件夹里新建了icon文件夹放入上面解压出的四个文件，你们可以自己决定放在哪里，也有放在static里面的

2、在App.vue中引入iconfont.css文件，注意文件路径

3、点击iconfont.css文件，修改红框部分代码

得到修改部分代码操作：
点击查看在线链接

将iconfont.css文件对应的部分修改，相信不用我都说，大家都能找到。然后每个url前加上https:就可以啦！

三、在vue文件中使用，亲测可用！

        <i class="iconfont icon-all"></i><i class="iconfont icon-aligne-bottom2-fill"></i><i class="iconfont icon-chakan"></i><i class="iconfont icon-column-4"></i>

补充一点：我遇到个新问题，如果有需求在main.js引入，但是打包apk报错main.js找不到样式文件的话，就把main.js引入样式文件语句注释掉。没有图标的话，App文件下面语句后加个逗号。

@import './common/icon/iconfont.css'; /* 逗号，重要的逗号 */

uniapp开发App如何引入阿里巴巴矢量库图标相关推荐

uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
Vue3引入阿里巴巴矢量多彩图标库（下载至本地引入）
阿里巴巴矢量图标库官网https://www.iconfont.cn/ 1.把选好的矢量图标库下载至本地并解压 2.复制解压的文件到项目中 3.在项目中配置 1.main.js/ts中配置 2.引入样 ...
阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
微信开发工具及Hbuilder中引用阿里巴巴矢量库（步骤一样）
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

uniapp开发App如何引入阿里巴巴矢量库图标

uniapp开发App如何引入阿里巴巴矢量库图标相关推荐

最新文章

热门文章