Iconfont——阿里巴巴矢量图标库，是阿里巴巴UED团队(花名：阿里妈妈MUX)打造的矢量图标管理平台。通过这个免费的工具，设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
网址https://www.iconfont.cn

以下是我认为非常实用的几点功能：

 1. Iconfont具有多种格式的icon，支持模糊搜索，让查找图标变得非常便捷。2. 支持尺寸和颜色的变幻，Iconfont支持选择尺寸和颜色，所以，前端工程师需要什么尺寸，可以在平台上自行下载。3. 建立自己的图标作品集，支持打赏。Iconfont的知名度意味着，设计师可以在这个平台上宣传自己。简历里直接给意向企业自己图标库的链接，实力展现一目了然。而且，优秀的作品，还会收到打赏，虽然不多，但是也算是一笔小小的收入

下面是具体使用步骤

登录阿里图标官网 (没有账号的可以先进行注册,用微博或者GitHub也可登录)
搜索需要的图标。输入汉字，拼音，英文都可以。
会显示出相关图标，可以在我标注的地方进行详细查找
鼠标放上去可以进行操作，我们需要点击购物车的图标进行选择
选择后的图标可在这查看
创建并添加到项目，选好后点击确定
将你的项目下载到本地
这里可以选择解压到自己vue项目内的assets文件夹内，并打开解压后的文件，删除红框内的两个文件
在main.js中引入阿里巴巴矢量图标库
import "@/assets/iconfont/iconfont.css";
样式在iconfont.css中

  font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.iconelementui:before {content: "\e60c";
}

使用方式
（1）复制图标代码

<template><div id="app"><i class="iconfont"></i></div>
</template><style scoped>.iconelementui {font-size: 200px;}#app {text-align: center;}
</style>

插入时注意class的命名(必须是iconfont),复制的图标代码粘贴在承载标签内就行

预览效果

vue中的阿里巴巴矢量图标使用相关推荐

如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
在小程序中使用阿里巴巴矢量图标库
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢量图标库的字体图标,首先要在这个网站挑选 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...
在小程序中使用阿里巴巴矢量图标库-代码版
阿里巴巴-iconfont 首先请自行注册-这个是必须要的 1.找到自己想要的图标,鼠标移动到图标上,点击添加到库 2.选择完之后,点击右上角的购物车图标 3然后在右侧点击添加至项目 4.在资源管理 ...
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
1.进入官方网站:iconfont-阿里巴巴矢量图标库 2.在搜索框搜索想要使用的图标,选择心仪的图标后点击添加购物车,可以选择多个. 3.选择完成后点击右上角购物车,弹出页面后点击添加至项目,选择项 ...
在VUE3中引入阿里巴巴矢量图标
官网:https://www.iconfont.cn/ (1)在图标库中选好自己需要的图标添加到购物车 (2)在购物车中添加到项目中(没有的话就自己新建一个) (3)下载至本地并解压 (4)使用,介绍 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...

vue中的阿里巴巴矢量图标使用

以下是我认为非常实用的几点功能：

下面是具体使用步骤

vue中的阿里巴巴矢量图标使用相关推荐

最新文章

热门文章