Почему не появляются мои простые значки?

Question

Я работаю над веб-сайтом «плоского дизайна», и я решил использовать простые значки. Я хотел, чтобы фон Simple Icon становился темнее, а белое оверлейное изображение оставалось прежним. Итак, я создал список (это navbar). Я также помещаю якорь внутри элемента списка. Я попытался установить фоновое изображение на якорь, как значок, и цвет фона для элемента списка, что бы я ни хотел. Я также попытался добавить переход к элементу списка, чтобы изменить цвет фона, но это не сработало, поэтому я просто избавился от него. Вот 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, я не включил стиль для ид «твиттере» или " youtube ", потому что я просто пытаюсь заставить его работать с одним на данный момент. Может ли кто-нибудь создать простые значки и сделать переходный процесс? Я дам простые значки. Изображения значков находятся внутри папки под названием «изображения» внутри другой папки с именем «_css», которая содержит сам файл 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/