专栏首页coding个人笔记字体图标iconfont

字体图标iconfont

前端开发离不开图标,会有一部分直接使用图片引进,但是在性能上来说对用户体验不是很好。

字体图标:以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调用,达到简单图片的效果。

优点:

1、 轻量性,加载速度快,因为字体图标都非常小。

2、 矢量性,不管在什么分辨率和端下,都有很好的展示效果。

3、 灵活性,各种css效果前端控制,不需要UI修改。

4、 兼容性,支持所有现代浏览器,包括IE低版本。

5、 可维护性,建立一个项目图标之后,可一直更新迭代。

缺点:

1、 与真正图片比起,效果不如图片。

2、 需要UI学习制作图标。

3、 不如图片那样容易重构。

字体图标使用不同公司项目要自己判断,这边推荐使用阿里字体图标:

http://iconfont.cn/home/index

搜索需要的图标:

把想要的图标选中:

点击右上角:

添加至项目,若无项目可新建项目:

然后三种格式都可下载:

Unicode:兼容性最好,支持ie6+,及所有现代浏览器,不支持多色,图标对应的Unicode编码,<i></i>。

Font:兼容性良好,支持ie8+,及所有现代浏览器,不支持多色,使用class来定义图标,<i class="iconfont icon-xxx"></i>。

Symbol:支持多色图标了,不再受单色限制,兼容性较差,支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般,还不如png。使用

<svg aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

下载之后只需要复制这几个文件到项目(只复制.css文件也能使用):

然后link css,就能直接在项目中使用了。后期如果添加修改图标,只需要重新下载覆盖之前的就可,对于原来的不会有影响。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解虚拟DOM和diff算法

    今天分享一下虚拟DOM和diff算法,当然,只是非常简单的了解一下,知道这两个东西的概念。

    wade
  • rtmp、m3u8直播小记

    最近项目做跟视频有关的,一个是直播,一个是播放视频。使用video标签。视频直播有很多协议,rtmp、rtsp、hls等就自己去了解,业务有做到就会了解一些。

    wade
  • 拖拽上传和记住密码问题

    最近一直在开发项目,不需要加班,但是要一整天都撸代码,慢慢的居然发现自己对于业务代码有了一些进步,尤其是对elementUi的使用。

    wade
  • 从iOS 11看怎样设计APP图标

    苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了...

    奔跑的小鹿
  • Unity 图标字体

    这是一个关于在 unity 中从网络开发获取大量文件非常小的图标的简短提示。你所要做的就是打包所有你想在一种字体里使用的所有图标,那样你就可以这个图标作为文本保...

    hrscy
  • [精品译文] 如何为移动应用设计出色的图标

    APP产品营销的其中很重要一环 ,就是图标设计。它的重要性很明显,即图标将影响用户的第一印象,这是吸引用户注意力的一种重要方式。特别是一些需要基于应用程序进行创...

    用户5009027
  • 披着羊皮的狼:如何利用漏洞以特定图标伪装可执行文件

    这个漏洞背后的图标显示bug可以深溯到Windows图像处理代码,其允许攻击者“借来”本地其他常用的图标并自动将可移植的可执行文件伪装起来,这样就更容易诱使用户...

    FB客服
  • 空心图标VS实心图标,你好哪一口?

    最近工作中遇到的一个问题引发了大家的讨论,就是在UI设计中,空心图标和实心图标应该在什么场景下使用?

    腾讯大讲堂
  • ICON设计使用手册:如何设计一个优秀的图标?

    大家都知道UI设计师要画图标,面对那么多纷繁复杂的林林总总的图标,大家有没有总结过一些系统的知识点呢,今天咱们来看看Nick Babich的这篇文章。

    用户5009027
  • [静Design译文] UI界面图标终极设计指南

    UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 如果把它们做成高斯模糊效果,你就会发现它们具有相同的视...

    用户5009027

扫码关注云+社区

领取腾讯云代金券