菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 使用技巧

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

发布时间:2024-01-04  栏目:使用技巧   浏览:   分类:IconFont 字体图标

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

1、图标大小不一

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

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

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

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

2、图标命名简化

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

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

比如:

<iclass="iconfonticon-ruanwentuiguangtubiao"></i>

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

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

3、CDN链接

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

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

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

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

相关文章

    无相关信息
评论
使用技巧
建站知识
使用技巧
调试安装
运营推广