html5怎么用 i标签做小图标

这是一个示例，可以试着先在阿里巴巴图标将图标加入购物车，然后再下载代码，将文件加压后，引入iconfont.css文件，在i标签中class属性名为iconfont，style样式可以自定义图标的大小和颜色，这里“&#xe782”为一个问号的代码。页面显示的为一个红色的问号。i标签做图标的好处就是将图片文字化，还有其他的方法就是通过<i>标题的伪类来显示图标，配合 ::before 或者::after伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。使用伪类的好处就是：插入的内容在页面的源码里是不可见的，只能在css里可见。

这个不是H5特有的情况，只是设计师习惯性用法，用i表示ico图标，便于他人理解。例子：

<ul><li><i class="ico1"></i>首页</li><li><i class="ico2"></i>关于我们</li></ul>

<style>

    .ico1,.ico2{background:url(test.png) center left no-repeat width:15px height:15px}

</style>

<i>标签显示斜体文本效果。

<i>标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

提示：<i>标签一定要和结束标签 </i>结合起来使用。

注意：由于i同时也是icon的缩写，像bootstrap等一些流行的框架，也经常用<i>标签来存储图标（icon），一般是用css写到<i>标签中

---