vue iconfont,

　　本文主要介绍Vue使用阿里巴巴iconfont矢量logo的问题。本文通过示例代码向您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

　　网上有很多导入方式，官方也给出了三种导入方式，但是大部分人导入后都不会展示，或者无法自定义样式。下面这种方法不会有以上问题，是目前最好的导入方式。

　　1.要求登录后使用网站阿里巴巴矢量图库。请先注册并登录。

　　2.登录后，搜索所需图标，如用户、购物车等。

　　3.将鼠标移动到所需图标，然后单击“添加到仓库”。建议不要直接使用复制SVG代码或者其他导入方式。先加入库再下载是最好的选择。

　　4.打开网址右上角的购物车，“将选中的图标添加到项目中”

　　5.下载到本地，你会得到一个压缩包，解压到当前文件夹。

　　6.这些内容就会出现。将除演示以外的所有文件复制到输入项目的“asset”文件夹下的“iconfont”文件夹中。如果没有，请创建一个新文件夹。

　　7.接下来，用浏览器打开解压文件夹中的demo_index.html。这些代码就是对应的图标，后面会用到。

　　8.在代码中这样写，你的项目网页会显示第一个图标。上图==#xe601==对应的图标。

　　模板

　　span class=iconfont#xe601。/span

　　模板

　　脚本

　　导入./asset/icon font/icon font . CSS ；//这里是你的iconfont.css路径，可能和我的不一样。

　　/脚本

　　9.要修改图标样式，只需修改。“样式”选项卡中的iconfont类。

　　模板

　　span class=iconfont#xe601。/span

　　模板

　　脚本

　　导入./asset/icon font/icon font . CSS ；//这里是你的iconfont.css路径，可能和我的不一样。

　　/脚本

　　风格。iconfont {

　　font-family: iconfont ！重要；

　　字体大小：16px

　　字体样式：正常；

　　-webkit-font-smoothing:抗锯齿；

　　-moz-osx-font-smoothing:灰度；

　　}

　　/风格

　　10.结束，导入./asset/icon font/icon font.css 首先在哪个页面上使用图标；只需要一会儿。

　　1.注意，如果要从阿里矢量图库中添加一些新图标，需要删除项目中的iconfont文件夹，从本文第2步开始，再次选择、下载、导入。

　　这篇关于Vue使用阿里巴巴iconfont矢量图标的文章到此为止。有关Vue矢量图标的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。