乱七八糟的图标

图标(icon)是一个应用中非常重要的角色。在应用内设置了合适的图标,可以极大的丰富用户界面,提升用户体验。 在前端业务开发过程中,几乎每天都会接触到图标,如果项目使用了组件库,那么通常是直接使用组件库提供的Icon组件;或者是使用UI设计师给的图标;又或者自己封装一个Icon组件。 最近在研究组件库,看到Icon组件的时候,发现并没有想象中那么简单。于是仔细研究了一下图标,希望你看完这篇文章后,不再为图标而烦恼。 图标类型 图标是一个统称,它包含了不同的格式或实现方式。图标不一定是一个图片,比如字体图标(Iconfont)。以图标的格式或实现方式可以分为一下几种: 图片图标:png、jpg等图片格式,栅格化图标 SVG图标:SVG文档,矢量化图标 字体图标:使用字体来渲染图标,矢量化图标 图片图标在使用上和图片无异,在过去的网页开发中是非常常用的图标格式,通常会使用雪碧图进行加载优化。 SVG图标是现在最常见的图标形式之一,因为它可以自由定制,也能很方便的导出为图片格式。 字体图标则是将图标以字体的形式渲染出来,它也可以使用SVG图标来制作。 在这里我们主要研究SVG图标和字体图标。 字体图标原理 字体图标相对比较特殊,这里简单介绍一下它的原理。浏览器渲染文字的时候,会先将其转为unicode编码,然后去匹配对应的字体文件并将其渲染到屏幕上。基于这个原理,我们便能制作一个特殊的字体,渲染的是一个图形,而不是一个文字。 浏览器有一些默认支持的字体图标,它是一组unicode字符集,完整列表可访问此链接。下面是一个示例,直接在HTML中输入unicode编码,就能显示对应的字体图标。支持十进制和十六进制两种格式。下面是一个简单的示例。 <p>Icon: &#9733;</p> <p>Icon: &#x2605;</p> 除了直接在标签中使用,我们也可以将unicode通过css代码放到content属性中,font-awesome等多数字体图标库都是基于此方式实现的。 <p> Icon: <i class="icon-star"></i> </p> .icon-star::before { content: "\2605"; } 在content属性中的语法是 “\ + 十六进制代码”,与HTML中有点区别。 图标尺寸 图标尺寸通常不是固定的,在不同的位置需要设置不同的大小。我们在设置尺寸时一般都会使用 width 和 height 来设置宽高。但是对于图标来说,经常需要与文字对齐,使用宽高来设置尺寸会比较麻烦。因此我们可以使用另一种方式来设置图标的尺寸—— font-size 。 使用font-size设置尺寸 使用 font-size 来设置尺寸属于css的一个技巧,其原理是基于css中的 em 单位,它是一个动态的单位,真实大小取决于 font-size 的值。因此我们可以将需要定制尺寸的地方,按比例替换为 em 单位,理论上就能使用 font-size 来控制尺寸。比如下面的代码,我们尝试使用 font-size 来控制一个 div 的大小。 // <div class="box"></div> .box { width: 1em; height: 1em; background: red; } 此时我们去设置 div 的 font-size ,便可以改变它的尺寸。下图左边是默认(16px)尺寸,右边的 font-size 为32px。...

December 20, 2021 · 2 min · 393 words · Johnson