为什么我的简单图标不会出现?

时间:2013-06-20 20:32:26

标签: css css3

我正在开发一个“平面设计”网站,我决定使用简单图标。我希望简单图标的背景变暗,而白色叠加图像保持不变。所以,我创建了一个列表(它是一个导航栏)。我还在列表项中放置了一个锚点。我尝试将背景图像设置为锚点作为图标,并将列表项目的背景颜色设置为我想要的任何内容。我也尝试添加一个过渡到列表项来改变背景颜色,但这不起作用所以我只是摆脱它。这是整个网站的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“twitter”或“youtube”添加样式,因为我现在只想尝试使用它。任何人都可以使简单的图标出现并使转换工作吗?我会提供简单的图标。图标图像位于另一个名为“_css”的文件夹中名为“images”的文件夹中,该文件夹包含CSS文件本身。

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

2 个答案:

答案 0 :(得分:2)

添加

display: block;

到您的主播

锚标签自然地显示为内嵌,因为锚中没有内容,所以尽管给它们维度,你仍然看不到它们

答案 1 :(得分:0)

display: block;

将此添加到您的<a>代码

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