html中为何经常使用<i>标签来作为小图标呢？

很多网站都是习惯使用<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>标签来作为小图标?就看个人喜好吧。