我是如何在开源系统中（Vue）中引入阿里巴巴Icon图标的？

从阿里巴巴icon里面下载的包文件吧所有的图标打包下载 把框里面的文件copy进入assets文件； 在main.js 引入iconfont.css 即可

i> 标签是语义化的，用于表示图标的意义，而不仅仅是装饰性的。引入我们下载的图标时注意引用的时候前面要加上 iconfont，然后后面指定使用图标的类名，也就是icon-jiang.3 icon-aixin 是从iconfont.css文件中拿到的,这个文件中有这个类,页面上才会显示图标,如果文件中没有这个类,页面中的图标就不会显示.aaa是自己定义的类名,可以设置宽高,这样页面上就可以展示你的图标了.复制内容后,放在一个css文件中,把css文件放在项目中。在入口文件main.js 中引入。

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

4.在css文件夹中再创建一个文件夹（我在这里命名为iconfont），因此将iconfont.ttf,iconfont.woff,iconfont.woff2三个文件复制粘贴到iconfont文件夹中；3.在vue项目中的assets文件夹中创建一个css文件夹，将iconfont.css文件复制粘贴到css文件夹。5.修改iconfont.css文件里面的其他三个文件的路径；6.在main.js文件中引入iconfont.css文件；8也可以在iconfont.css文件中修改样式；...

效果展示： 引入眼睛的图标 步骤： 1：https://www.iconfont.cn/ 2：搜索 3：放在要选择的图标上“添加入库” 4：点击自己的购物车 5：下载代码6，向项目的src文件夹下的assets添加iconfont文件夹，将刚刚9个文件复制到里面 7、main.js中 import './assets/iconfont/iconfont.css'; 8、对应的.vue文件中 <i class="iconfont icon-yanjing"></i> 9、注意 i

我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。

最近，在项目的开发中，我们规划了一个Icon组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且...

从阿里字体图标库新建一个项目（当然也可选择其他icon库） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190202225650587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2djeV9y...

方法一：简单粗暴 - 生成链接使用法 1.打开iconFont官网选择自己喜欢的图标，并且添加购物车 2.点击购物车，添加至项目 5.为了方便可以给项目起一个名字 6. 选择Font class 7.点击“暂无代码，点此生成” 7. 点击复制连接 8.接下来复制链接地址，在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址.... <link rel="stylesheet" href...

1.小图标的前世今生。 曾几何时，H5开发还是以雪碧图作为小图标的一种处理方案；然而，随着时间迁移，在当今前端开发环境中，icon小图标的使用率越来越高，需求越来越精致。虽然Element、Iview、Vant等组件库也相应提供了一些自带的icon图标，可是在追优的PM眼中，高大上的icon小图标才是其所想要的。本着专业人做专业事的心境，挑选和使用最优，最好的小图标就成了前端开发们的一种准则。 2.阿里巴巴 -- iconfont。 在众多icon小图标的资源站中，阿里巴巴的iconfont无疑是其中

引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...

1、登录阿里巴巴图标库网，选iconfont图标，添加入库   2、点击购物车图标，添加到项目，选择项目，点击确定   3、此时会跳转至我的项目页面，显示了这个项目中所有选中的图标，点击红色文字，生成代码，再点击复制代码，将生成的代码拷贝至项目中的css文件中 4、查看使用帮助，这里第一步的代码替换上面我的第三步中拷贝的代码，第二步第三步照做即可     ...

阿里巴巴icon在vue项目中使用方法

当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。