阿里巴巴字体图标库iconfont使用步骤

首先给出阿里妈妈图标库官方网址：http://www.iconfont.cn/
然后选择一个账号注册并登陆：

登陆成功之后就可以选择自己想要的图标了（支持中英文查找，很智能哦）：

点击购物车，会出现下图，然后新建一个现在自己在做的项目

下载到本地之后点击：

我在项目中是选择Symbol的方式引入的，操作方法如下：

Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

阿里巴巴字体图标库iconfont使用步骤相关推荐

Qt 使用阿里巴巴字体图标库 iconfont
字体图标的好处:字体图标是矢量的,可以无限放大不模糊,可以通过改变字体颜色color来改变图标颜色: iconfont官网地址 Qt使用iconfont 1 查找图标添加入库 iconfont网站查找 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存
前一段时间在项目中引入阿里巴巴字体图标库的图标,按步骤走了一遍,但是一直不成功. 刚好需求改了,不需要用图标,就暂时搁浅没在管这个. 今天又有新的需求要用到字体图标,在ant-design-vue官方 ...
阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
阿里巴巴矢量图标库iconfont的素材使用
**阿里巴巴矢量图标库iconfont的素材使用**写于2020年8月5日苏州宜家餐厅昨天首次写的vue脚手架搭建方法,浏览量超过了我的想象,我的分享对于新手来说,应该是很有帮助的,因为我就是个v ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
超级好用的阿里巴巴字体图标库，附教程
1.新建:fonts文件夹 2.打开阿里巴巴字体图标官方网站:https://www.iconfont.cn/collections/index?type=3 3.把自己想要的图标,加入购物车,让后下 ...

阿里巴巴字体图标库iconfont使用步骤

阿里巴巴字体图标库iconfont使用步骤相关推荐

最新文章

热门文章