1.简单粗暴型
直接设置<i>元素为inline-display，然后为行内级框设置大小，接着直接把图像放在这个框里面，然后调整位置和图片大小即可。
<!DOCTYPE html>
<html>
<head>
<style>
.icon{
display:inline-block;
width:50px;
height:50px;
background-image:url();
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="logo">
<i class="icon"></i>
</div>
</body>
</html>
2.利用::before或者::after配合<i>通过转义字符来实现一些已经编码好的图标.
下面line-height为1指的是行高是一个字符的高度，转义字符正好都是字符！然后放在前面或者后面的内容就是转义字符！！
<!DOCTYPE html>
<html>
<head>
<style>
.icon{
line-height:1;
}
.icon::before{
content: "\f003";
}
</style>
</head>
<body>
<div class="logo">
<i class="icon"></i>
</div>
</body>
</html>
3.直接通过::before和::after为<i>元素设置图标！
<!DOCTYPE html>
<html>
<head>
<style>
.icon::before{
display:inline-block;
width:50px;
height:50px;
background-image:url();
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="logo">
<i class="icon"></i>
</div>
</body>
</html>
其实第三种和第一种实在是太像了，就是一个用的元素本身，一个在元素前。而差别在于，第三种没有直接为<i>元素设置，而是采用伪元素的方法优点在于：伪元素这个东西在文档中并不存在，只是作为一种CSS渲染！这样不会占用多余的资源，而且更加灵活！！
这里再说说为什么使用<i>来设置图标，事实上<i>元素语义上并不适合用来做图标，但是由于<i>元素所占用的空间比<span>还要少(事实上我们完全可以用<span>来设置图标)，所以比较节省空间，而且使用<i>元素只为添加一个图标是为了分开图标和内容，为了更好的布局，否则，我们也完全可以直接在内容前面添加图标即可！！、
本博客由博主原创，如需转载需说明出处！谢谢支持！