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

经验分享

如何优雅的使用阿里巴巴IconFont字体图标(图文)

经验分享 我的站长站 2022-09-08 共138人阅读

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

1、图标大小不一

在使用字体图标前,需要把图标大小调整成一样大小,这样在网页中使用字体图标时他们就不会一个大,一个小一点了。

如何优雅的使用阿里巴巴IconFont字体图标(图文)

同样给图标都是fontsize:16px,有的图标默认网格最大,有的居中很小,在实际网页中,是有肉眼可见的大小差别的,影响美观。

我们可以以某一条网格为界限,把图标用放大镜调整成一样大小,在实际网页中就会尽量一样大了。

2、图标命名简化

IconFont平台默认会给图标以拼音形势命名,如果是多个中文名称的图标,命名就会很长,在调用的时候,命名也会很长。

如何优雅的使用阿里巴巴IconFont字体图标(图文)

比如:

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

这么长的图标虽然不会影响功能使用,但是显得非常不专业,而且页面如果有很多这样的长名称图标,会增加页面代码字符长度,增加页面体积大小。

所以,我的站长站建议大家可以看到名称很长的图标,可以简化一下,用拼音首字母代替。

3、CDN链接

看到还有项目在使用IconFont平台默认生成的IconFont地址链接,我的站长站建议在实际项目中千万不要使用,这个CDN链接稳定性极差,经常打不开。

IconFont平台也提示了,CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。

如何优雅的使用阿里巴巴IconFont字体图标(图文)

CDN链接只能用在测试开发的时候,实际项目下载到本地才是最稳定的方法。

相关推荐
  • IconFont
  • 字体图标
  • IconFont
  • 字体图标
  • 如何优雅的使用阿里巴巴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年前
  • 如何优雅的使用阿里巴巴IconFont字体图标(图文)
    如何优雅的使用阿里巴巴IconFont字体图标(图文)

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

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

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

    经验分享 138 2年前
  • 阿里巴巴IconFont矢量字体图标库在线工具
    阿里巴巴IconFont矢量字体图标库在线工具

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

    在线工具 894 4年前
  • iconfont字体图标工具网站大全
    iconfont字体图标工具网站大全

    iconfont字体图标工具不止只有阿里的iconfont,其实还有很多比iconfont更老的字体图标网站,还有很多国外的老牌字体图标项目,我的站长站收藏了自用的iconfont字体图标工具网站大全分享给大家。1、Fon...

    在线工具 35 1年前
  • icones免费的图标网站工具分享
    icones免费的图标网站工具分享

    工具介绍icones是一款免费的图标网站工具,集成了各种图标库,包括ant-design、radix、lucide等。页面非常简洁,无需登录注册,看中哪款图标直接就可以下载。下载支持各种格式、语言等等,也可以远程使用,...

    在线工具 13 3个月前
  • 如何优雅的使用阿里巴巴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年前
  • 如何优雅的使用阿里巴巴IconFont字体图标(图文)
    如何优雅的使用阿里巴巴IconFont字体图标(图文)

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

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

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

    经验分享 138 2年前
  • 阿里巴巴IconFont矢量字体图标库在线工具
    阿里巴巴IconFont矢量字体图标库在线工具

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

    在线工具 894 4年前
  • iconfont字体图标工具网站大全
    iconfont字体图标工具网站大全

    iconfont字体图标工具不止只有阿里的iconfont,其实还有很多比iconfont更老的字体图标网站,还有很多国外的老牌字体图标项目,我的站长站收藏了自用的iconfont字体图标工具网站大全分享给大家。1、Fon...

    在线工具 35 1年前
  • icones免费的图标网站工具分享
    icones免费的图标网站工具分享

    工具介绍icones是一款免费的图标网站工具,集成了各种图标库,包括ant-design、radix、lucide等。页面非常简洁,无需登录注册,看中哪款图标直接就可以下载。下载支持各种格式、语言等等,也可以远程使用,...

    在线工具 13 3个月前