html中为何经常使用标签来作为小图标呢?

时间:2021-02-08 15:50:18

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

在语义上<i> 标签显示斜体文本效果,它告诉浏览器将包含其中的文本以斜体字或者倾斜字体显示。从含义上可以看出<i>并不具有icon的语义。所以如果遵循语义最好还是使用<span>,目前3.X的版本里面显示图片由之前的<i>改为了<span>,例如:

 <!--在2.X的版本里面的图表组件是-->
<i class="icon-search"></i>
<!--在3.X的版本里面的组建改回了span-->
<span class="glyphicon glyphicon-search"></span>
在一些字体库中通常也是使用i来代表icon的。例如font-awesome字体库中就是使用<i>来显示图标字体的,它的好处是毋庸置疑的:1.矢量(无限缩放、高清)、2.CSS样式(通用、灵活)、3.体积更小(快速)。
 <i class="fa fa-spinner fa-spin"></i>

网上还流行一种显示方式:通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见。

 
 
总结:
由于html中标签的现状是: “爱怎么用就怎么用,哪个浏览器也不会难为你”  ,内联元素和块级元素都能通过display相互转换,由此可见标签的灵活性,使用不遵循语义这个问题,主要是因为遵循并没有带来什么实质的好处。所以是否使用<i>标签来作为小图标?就看个人喜好吧。