uni-app引用使用阿里巴巴矢量图标库iconfont

1.新建文件（看了好几篇使用说明和官方说明总结出来的用法）

首先右击项目新建一个目录common和pages同级，右击common文件夹新建一个.css文件，命名icon.css

2.打开网页搜索iconfont，选择

搜索想要的图标，把看中心意的小图标放入购物车里，

然后点击右上角的购物车，新建一个文件夹存放这次收藏的图标

确定后会跳转至生成代码的页面，点击（暂无代码，点此生成），将生成的代码复制，页面也别关，后面还需要复制图标下的代码

3.将复制的代码粘贴到icon.css文件里

4.在App.vue的style里全局引用

引用：@import存放着icon代码的css文件，顺便在这里全局定义一个官方使用icon的样式

<style>@import "./conmen/icon.css";.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
</style>

5.最后在页面里使用全局样式.iconfont，在阿里巴巴图标库把图标代码复制过来放在标签里即可。

给icon字体图标调大小=给字体调大小

<template><view><view class="iconfont " >&#xe605;</view></view>
</template>

如果不小心关了网页，则在icon首页选择Resources，再选择My Projects，找到刚刚新建的项目名称

6.最后提一下

凡是更新了阿里巴巴图标库的购物车和项目的图标（添加新图标），需要重新获取代码放入css文件里，实行第三点操作，后面的使用步骤一样

【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】相关推荐

阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
阿里巴巴矢量图标库iconfont的素材使用
**阿里巴巴矢量图标库iconfont的素材使用**写于2020年8月5日苏州宜家餐厅昨天首次写的vue脚手架搭建方法,浏览量超过了我的想象,我的分享对于新手来说,应该是很有帮助的,因为我就是个v ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库iconfont使用教程
打开https://www.iconfont.cn,直接搜索图标名称即可:
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
简单介绍一下阿里巴巴矢量图标库的使用
相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便. ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...

【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】