阿里巴巴矢量图标引用问题

第一步：
摒弃之前的先从图标库下载源代码，再引入font样式到自己的项目中的步骤，换作如下步骤操作即可。
之前新建的font文件夹，可以删掉了。

新的引入图标方法：

1．挑选所需图标，加入购物车

2.选择 ——> 添加至项目：

如果之前没有项目，点击右上角的 + 号按钮，新建一个任意项目即可：

3.此时，购物车里的图标已经添加到项目里了

4.点击生成代码，即可生成下图红色方框中的代码，将此代码复制到自己本地新建的iconfont.css 文件中：

5.将鼠标放到需要引入的图标上，点击复制代码：

6．将复制到的字体图标代码粘帖到自己要显示的网页中：

查看效果，手机图标已经引用过来：

7.此时，若想要添加其它新的图标，直接添加到之前在线新建的项目中即可，添加完成之后，它会提示，你有新的图标添加，会让你更新代码，也就是我们本地文件引入的css代码：

点击更新代码后，将代码复制到本地的iconfont.css文件中，将之前的css文件覆盖重写，此时再引入新添加的图标，便可完美引入，不会对之前引入的图标造成影响。

阿里巴巴矢量图标引用问题相关推荐

阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
2017 阿里巴巴矢量图标库导入所选图标到jsp页面步骤
阿里巴巴矢量图标库导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路. 1.需要注册一个github账号: 登陆 ...
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
1.在阿里巴巴矢量图标库中,找到你喜欢的字体图标,选择添加入库(即购物车图标) 2.点击在页面右上方的"购物车" 3.选择"添加到项目",(没有项目可以创建一个 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
阿里巴巴矢量图标库iconfont的素材使用
**阿里巴巴矢量图标库iconfont的素材使用**写于2020年8月5日苏州宜家餐厅昨天首次写的vue脚手架搭建方法,浏览量超过了我的想象,我的分享对于新手来说,应该是很有帮助的,因为我就是个v ...

阿里巴巴矢量图标引用问题

阿里巴巴矢量图标引用问题相关推荐

最新文章

热门文章