在 uniapp 中使用阿里巴巴矢量图标

最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程

1.到官网，登录，没有账号的话就注册一个：

iconfont-阿里巴巴矢量图标库

2.搜索自己想要的图标，并加入购物车中

3. 点击右上角购物车图标，打开购物车

4.点击下载代码，把下载下来的文件解压出来

5. 目前我下载的，解压出来以后，文件都是默认存放在 font_i5lcy3krrgo 的文件夹中，推荐把文件夹名改成 font ，然后把整个文件夹复制到你需要使用的项目中

6.这里我把文件放入了 static 文件夹下面，打开里面的 iconfont.css 文件，修改@font-face 中的所有 url 路径，因为我是放在 static下，所以为

7. 在 App.vue 中引入iconfont.css

<style>/*每个页面公共css */@import url("/static/font/iconfont.css");
</style>

8. 在页面中通过标签的形式使用图标，class 中的类名为第6步中font-family 后的名字，在文件中打开 demo_index.html ，  为复制图标下的名字

<text class="iconfont"></text>
<text class="iconfont"></text>
<text class="iconfont"></text>
<text class="iconfont"></text>
<text class="iconfont"></text>

查看效果：

注意事项：

（1）图标的大小通过设置 font-size 来改变

（2）第6步中font-family 后面的名字可以自定义，但是我没弄，感兴趣的可以百度一下

（3）当需要放置Unicode编码的是伪元素的content属性时，需要将该编码的前三位用 “ \ ”替换。否则图标将不会出现，比如将  替换为 \e65d; 在 iconfont.css 中有举例

text::before {content: "\e65d;";}

（4）如果是团队项目，Ui把全部图标都上传完毕后，不需要自己搜索下载，找到主页中的资源管理，选择我的项目，找到左侧我参与的项目选择项目，直接点击下载至本地，剩下的操作就是一样的了

学完了才觉得好简单，嗐

在 uniapp 中使用阿里巴巴矢量图标相关推荐

在小程序中使用阿里巴巴矢量图标库
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢量图标库的字体图标,首先要在这个网站挑选 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
在小程序中使用阿里巴巴矢量图标库-代码版
阿里巴巴-iconfont 首先请自行注册-这个是必须要的 1.找到自己想要的图标,鼠标移动到图标上,点击添加到库 2.选择完之后,点击右上角的购物车图标 3然后在右侧点击添加至项目 4.在资源管理 ...
在VUE3中引入阿里巴巴矢量图标
官网:https://www.iconfont.cn/ (1)在图标库中选好自己需要的图标添加到购物车 (2)在购物车中添加到项目中(没有的话就自己新建一个) (3)下载至本地并解压 (4)使用,介绍 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
uni-app使用阿里巴巴矢量图标库
uni-app使用iconfont中的图标 1.打开网址链接: 阿里巴巴矢量图标库. 2.登录自己的账号 3.点击响应的类型然后点击收藏 4.点击项目 5.点击下载到本地 6.解压下载下来的压缩文件 ...
在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...

在 uniapp 中使用阿里巴巴矢量图标

1.到官网，登录，没有账号的话就注册一个：

2.搜索自己想要的图标，并加入购物车中

3. 点击右上角购物车图标，打开购物车

4.点击下载代码，把下载下来的文件解压出来

5. 目前我下载的，解压出来以后，文件都是默认存放在 font_i5lcy3krrgo 的文件夹中，推荐把文件夹名改成 font ，然后把整个文件夹复制到你需要使用的项目中

6.这里我把文件放入了 static 文件夹下面，打开里面的 iconfont.css 文件，修改@font-face 中的所有 url 路径，因为我是放在 static下，所以为

7. 在 App.vue 中引入iconfont.css

8. 在页面中通过标签的形式使用图标，class 中的类名为第6步中font-family 后的名字，在文件中打开 demo_index.html ，  为复制图标下的名字

在 uniapp 中使用阿里巴巴矢量图标相关推荐

最新文章

热门文章

在 uniapp 中使用 阿里巴巴矢量图标

1.到官网，登录，没有账号的话就注册一个：

2.搜索自己想要的图标，并加入购物车中

3. 点击右上角 购物车 图标，打开购物车

4.点击下载代码，把下载下来的文件解压出来

5. 目前我下载的，解压出来以后，文件都是默认存放在 font_i5lcy3krrgo 的文件夹中，推荐把文件夹名改成 font ，然后把整个文件夹复制到 你需要使用的项目中

6.这里我把文件放入了 static 文件夹下面，打开里面的 iconfont.css 文件，修改@font-face 中的 所有 url 路径，因为我是放在 static下，所以为

7. 在 App.vue 中引入iconfont.css

8. 在页面中通过 标签的形式使用图标，class 中的类名为 第6步中font-family 后的名字，在文件中打开 demo_index.html ，  为复制图标下的名字

在 uniapp 中使用 阿里巴巴矢量图标相关推荐

最新文章

热门文章

在 uniapp 中使用阿里巴巴矢量图标

3. 点击右上角购物车图标，打开购物车

5. 目前我下载的，解压出来以后，文件都是默认存放在 font_i5lcy3krrgo 的文件夹中，推荐把文件夹名改成 font ，然后把整个文件夹复制到你需要使用的项目中

6.这里我把文件放入了 static 文件夹下面，打开里面的 iconfont.css 文件，修改@font-face 中的所有 url 路径，因为我是放在 static下，所以为

8. 在页面中通过标签的形式使用图标，class 中的类名为第6步中font-family 后的名字，在文件中打开 demo_index.html ，  为复制图标下的名字

在 uniapp 中使用阿里巴巴矢量图标相关推荐