1.簡單粗暴型
直接設置<i>元素爲inline-block，然後爲行內級框設置大小，接着直接把圖像放在這個框裏面，然後調整位置和圖片大小即可。
<!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>元素只爲添加一個圖標是爲了分開圖標和內容，爲了更好的佈局，否則，我們也完全可以直接在內容前面添加圖標即可！！、
本博客由博主原創，如需轉載需說明出處！謝謝支持！