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

更新日期: 2017-11-21阅读: 10.3k标签: 图标分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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

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

<!--在2.X的版本里面的图表组件是-->
<i class="icon-search"></i>
<!--在3.X的版本里面的组建改回了span-->
<span class="glyphicon glyphicon-search"></span>

在一些字体库中通常也是使用i来代表icon的。例如font-awesome字体库中就是使用来显示图标字体的，它的好处是毋庸置疑的：1.矢量（无限缩放、高清）、2.css样式（通用、灵活）、3.体积更小（快速）。

<i class="fa fa-spinner fa-spin"></i>

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

总结：

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

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