一、进入阿里图标库官网站:http://www.iconfont.cn

二、选择想要的图标加入购物车(如果不想以unicode方式使用图标,那直接下载png等格式即可)

阿里图标库的基本使用

三、然后进入购物车点击下载代码

阿里图标库的基本使用

 

四、解压后,选择这下图五个文件复制,其它的是demo文件,告诉我们如何使用。

阿里图标库的基本使用

 

五、我在项目的assets目录下新建了个fonts目录来放这五个文件

阿里图标库的基本使用

 

六、打开iconfont.css,为方便,我改了默认的图标变量名,还把图标大小font-size改为24px

阿里图标库的基本使用

 

七、然后在main.js中导入此css文件

阿里图标库的基本使用

八、然后我在我的Home.vue文件中使用这两个图标

阿里图标库的基本使用

 

九、最后界面显示出来的效果如下图

阿里图标库的基本使用

 

这就是unicode图标的使用

相关知识(unicode是字体在网页端最原始的应用方式,特点是:

兼容性最好,支持ie6+,及所有现代浏览器。

支持按字体的方式去动态调整图标大小,颜色等等。

但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。)

相关文章:

  • 2021-12-07
  • 2022-01-15
  • 2021-12-06
  • 2021-11-27
  • 2022-02-13
  • 2022-12-23
  • 2021-06-18
  • 2021-11-29
猜你喜欢
  • 2021-07-22
  • 2021-11-30
  • 2021-10-11
  • 2021-11-18
  • 2021-11-09
  • 2021-09-07
  • 2021-12-18
相关资源
相似解决方案