欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

经验分享

Iconfont阿里巴巴图标使用方法

经验分享 我的站长站 2020-11-08 共362人阅读

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

相关信息
阿里巴巴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阿里巴巴图标使用方法

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

    经验分享 362 4年前
  • Iconfont图标库Android/IOS使用方法

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

    经验分享 281 4年前
  • IE不显示加载iconfont阿里巴巴图标的解决方法
    IE不显示加载iconfont阿里巴巴图标的解决方法

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

    css教程 431 4年前
  • 阿里巴巴IconFont矢量字体图标库在线工具
    阿里巴巴IconFont矢量字体图标库在线工具

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

    在线工具 893 4年前
  • 如何优雅的使用阿里巴巴IconFont字体图标(图文)
    如何优雅的使用阿里巴巴IconFont字体图标(图文)

    什么叫优雅的使用IconFont字体图标了?就是非常仔细、丝滑、正确的使用,我的站长站从IconFont测试版本开始一直在使用IconFont,总结了许多细节经验分享给大家。1、图标大小不一在使用字体图标前,需要...

    经验分享 138 2年前
  • IE不显示加载iconfont阿里巴巴图标的解决方法
    IE不显示加载iconfont阿里巴巴图标的解决方法

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

    css教程 431 4年前
  • Iconfont阿里巴巴图标使用方法
    Iconfont阿里巴巴图标使用方法

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

    经验分享 362 4年前
  • Iconfont图标库Android/IOS使用方法

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

    经验分享 281 4年前
  • 如何优雅的使用阿里巴巴IconFont字体图标(图文)
    如何优雅的使用阿里巴巴IconFont字体图标(图文)

    什么叫优雅的使用IconFont字体图标了?就是非常仔细、丝滑、正确的使用,我的站长站从IconFont测试版本开始一直在使用IconFont,总结了许多细节经验分享给大家。1、图标大小不一在使用字体图标前,需要...

    经验分享 138 2年前