vue使用小技巧之如何使用阿里巴巴矢量图标库

阿里巴巴矢量图标库介绍:设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

目前拥有icon即将突破500万。

网址:https://www.iconfont.cn

本篇文章将会为小伙伴们详细图解——在vue中如何使用阿里巴巴矢量图标!

1、打开阿里巴巴矢量图标库网址

vue使用小技巧之如何使用阿里巴巴矢量图标库

2、注册并登陆(略)

3、点击图标管理—》我的项目,然后创建项目。

vue使用小技巧之如何使用阿里巴巴矢量图标库

4、添加新建项目的信息

5、任意搜索一个图标,例如“elementui”

6、在搜索结果中,请将鼠标移入到你心仪的图标,然后点击购物车(不愧是阿里,做什么都有种电商的味道)将你的图标入库!

7、入库后,网页右上角的购物车图标会有红色警示,点它!

8、然后点击“添加至项目”。选择好加入的项目后,点击确定。

9、将你的图标下载至本地。

10、下载并解压缩的文件如下图:

11、在文件复制到项目中(删除demo开头的文件),我的地址是:src/assets/iconfont

12、在main.js中引入阿里巴巴矢量图标库

 
 
  1. import "@/assets/iconfont/iconfont.css";

13、样式在iconfont.css中

 
 
  1. .iconfont {

  2. font-family: "iconfont" !important;

  3. font-size: 16px;

  4. font-style: normal;

  5. -webkit-font-smoothing: antialiased;

  6. -moz-osx-font-smoothing: grayscale;

  7. }

  8. .iconelementui:before {

  9. content: "\e604";

  10. }

14、使用:

 
 
  1. <template>

  2. <div id="app">

  3. <i class="iconfont iconelementui"></i>

  4. </div>

  5. </template>

  6. <style scoped>

  7. .iconelementui {

  8. color: red;

  9. font-size: 200px;

  10. }

  11. text-align: center;

  12. }

  13. </style>

15、预览结果:

—————END—————

喜欢本文的朋友们,欢迎长按下图关注公众号 

张培跃,收看更多精彩内容

vue使用小技巧之如何使用阿里巴巴矢量图标库》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/4233.html