经验分享

Iconfont阿里巴巴图标使用方法

精准像素 2020-11-08 人阅读

直接上阿里巴巴图标使用教程,废话不啰嗦,Iconfont网站介绍看下面这篇介绍。

相关信息
阿里巴巴IconFont矢量字体图标库在线工具

搞前端开发、UI设计的应该都知道这款阿里巴巴IconFont矢量字体图标库在线工具,是国产最大的矢量字体图标库了。而且使用非常人性方便,网站没有多余的内容,打开搜索即...

第一步:打开官网

阿里巴巴图标官网:https://www.iconfont.cn/

第二步:登录

Iconfont阿里巴巴图标使用方法

登录方式支持微博、gethub、阿狸全系账号

第三步:新建一个项目

这一步也可以跳过,在后面添加Iconfont图标的时候新建,但是没有在项目里面新建详细。

Iconfont阿里巴巴图标使用方法

点击我的项目

Iconfont阿里巴巴图标使用方法

填写你的项目名称,前缀可以修改成自己的。

第四步:搜索自己需要的阿里巴巴图标

Iconfont阿里巴巴图标使用方法

输入关键字搜索

第五步:添加到项目

Iconfont阿里巴巴图标使用方法

点击购物车的按钮 ,添加到购物车

Iconfont阿里巴巴图标使用方法

点击右上角的购物车,弹出购物车窗口,点击添加项目

第六步:下载阿里巴巴图标打包项目

Iconfont阿里巴巴图标使用方法

找到刚刚的项目,点击下载到本地

第七步:网站调用阿里巴巴图标

直接复制下载项目里面的Iconfont.css的代码,到你的CSS文件内就可以了。

或者在你的CSS样式文件头部直接调用Iconfont.css也可以。

@import '../fonts/iconfont.css';

最后在需要调用的地方输入

<i class="iconfont icon-ss"></i>

iconfont为新建项目的时候设置的。

icon为前缀,如果修改过就改成自己的。

ss就是图标的命名。

相关推荐
  • 阿里巴巴图标
  • Iconfont阿里巴巴图标使用方法
    Iconfont阿里巴巴图标使用方法

    直接上阿里巴巴图标使用教程,废话不啰嗦,Iconfont网站介绍看下面这篇介绍。[xxid]47,136[/xxid]第一步:打开官网阿里巴巴图标官网:https://www.iconfont.cn/第二步:登录登录方式支持微博、gethub、阿...

    经验分享 185 10个月前
  • Iconfont图标库Android/IOS使用方法

    阿里巴巴图标超详细使用方法可以看下面这篇教程,本篇精准像素主要分享阿里巴巴图标在Android和IOS上的使用方法。[xxid]30,1818[/xxid]Android使用方法1、下载iconfont字体图标2、复制字体文件到项目 assets 目录3、打开 iconfont 目录中的 demo.html...

    经验分享 157 10个月前
  • IE不显示加载iconfont阿里巴巴图标的解决方法
    IE不显示加载iconfont阿里巴巴图标的解决方法

    iconfont图标是阿里出品的一款字体图标工具,不得不说非常好用,速度快,图标资源多,是国内程序员不可缺少的工具之一。官网:https://www.iconfont.cn/iconfont图标截图iconfont加载方法第一步:拷贝项目下...

    css教程 199 11个月前