爲什麼我的簡單圖標不會出現？

Question

我正在「平面設計」網站上工作，並決定使用簡單圖標。我希望簡單圖標的背景變暗，而白色覆蓋圖像保持不變。所以，我創建了一個列表（這是一個導航欄）。我還在列表項中放置了一個錨點。我嘗試將背景圖像設置爲錨點作爲圖標，並將列表項目的背景顏色設置爲我想要的任何內容。我也嘗試添加一個轉換到列表項目來改變背景顏色，但沒有奏效，所以我剛剛擺脫它。下面是該網站的是整片的CSS：

div#nav{ 
float:right; 
width:auto; 
height:37px; 
padding-top:15px; 
padding-right:15px; 
padding-bottom:5px; 
background-color:rgba(100,100,100,0.3); 
border-left-color:rgba(255,255,255,0.2); 
border-right-color:rgba(255,255,255,0.2); 
border-right-width:1px; 
border-right-style:solid; 
border-left-width:1px; 
border-left-style:solid; 
border-top-width:1px; 
border-top-style:solid; 
border-top-color:rgba(255,255,255,0.2); 
margin-top:102px; 
margin-left:2px; 
} 
#nav ul{ 
padding:0; 
list-style:none; 
margin:0; 
} 
#nav ul li{ 
width:32px; 
height:32px; 
margin-left:15px; 
display:inline-block; 
background-color:#000000; 
border:0; 
} 
#nav ul li a{ 
z-index:10; 
} 
#facebook{ 
width:32px; 
height:32px; 
background-image:url('images/facebook.png'); 
} 

這裏是HTML：

<div id="nav"> 
<ul> 
<li><a id="facebook" ></a></li> 
<li><a id="twitter" ></a></li> 
<li><a id="youtube" ></a></li> 
</ul> 
</div> 

在CSS，我沒有包括id爲「推特」造型或者「 youtube「，因爲我只是試圖讓它與現在一起工作。任何人都可以使簡單的圖標出現，並使過渡工作？我會提供簡單的圖標。圖標圖像位於另一個名爲「_css」的文件夾內的名爲「images」的文件夾內，該文件夾包含CSS文件本身。

https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-32.png

Answer 1

添加

display: block; 

你的錨

錨標籤自然內嵌顯示，自你在錨沒有內容，所以你不會看到他們雖然給他們的尺寸

Answer 2

display: block; 

將此添加到您的<a>標籤

小提琴：http://jsfiddle.net/9CFGK/