阿里巴巴图标库生成iconfont图标

概要：通过iconfont字体图标，可以让开发人员通过字体来替换图标

一、准备工作

登录阿里巴巴icon：http://www.iconfont.cn/，选择你支持的登录方式。

二、选择你想要的图标，选择添加入库

三、选择添加至项目，如果提示没有项目，请创建一个项目。

四、选择下载至本地

五、下载成功后的样子，我们重点需要的是需要的是iconfont.css

六、代码中使用

1.将整个文件拷贝至你的项目中

2.页面中引入

3.具体使用，有两种方式

1）<i class="iconfont icon-iconset0207"></i>,iconfont后的名字在方才图标加入项目时可以看到

2）<i class="iconfont">&#xe66a</i> &#x是固定的，后面的可以在iconfont.css中查看

七、到此访问页面就可以看到效果啦

有什么不明白的或者文章有不对的地方，请评论指出

阿里巴巴图标库生成iconfont图标相关推荐

使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
html使用阿里图标库（iconfont）制作字体图标
话不多说,先看一下效果图: 一.通过阿里图标库生成iconfont.css 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2. ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标
在阿里巴巴矢量图标库官网上下载图标,具体操作在下方有讲解. 在QT项目中设置图标示例. 我总结了一下需要设置图标的地方大致分为5个,如下: 1. 设置窗口图标(利用setWindowIcon()属性实 ...
antd 阿里图标库扩展a-icon 图标
vue 项目中使用阿里图标库扩展antd 组件 icon 的图标第一步:创建图标库在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...
阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配
前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...
阿里巴巴图标库的字体图标使用方法
文章目录前言:此方法适合成体系的应用图标,若使用单个图标可直接下载使用一.将图片加入项目并下载至本地二.引用图标的三种方式 1. font-class引用 2. Symbol 引用 3. Uni ...

阿里巴巴图标库生成iconfont图标

有什么不明白的或者文章有不对的地方，请评论指出

阿里巴巴图标库生成iconfont图标相关推荐

最新文章

热门文章