创建可点击元素列表

Question

我正在尝试为社交媒体图标创建一个看起来像这样的栏

但我真的被卡住了。

我尝试像这样创建它：

<div class="social-media">
<ul>
    <li class="facebook">facebook</li>
    <li class="instagram">instagram</li>
    <li class="twitter">twitter</li>
    <li class="youtube">youtube</li>
</ul>
</div>

.social-media ul li {
display: inline-block;
}

.social-media ul li.facebook:after {
content: url('../images/facebooklogo.png');
width: 21px;
height: 21px;
}

等每个li.class

但问题是图像忽略了我在这里指定的宽度和高度，并且很大。我似乎无法瞄准他们

第二件事是，我不知道如何让它们整个可点击，当我尝试使用“a”标签时，它没有瞄准li指定的图像：之后，只有li里面的文字

我只是以错误的方式解决这个问题吗？是否更好地使用一堆嵌套的div，并使用onclick使整个事物成为一个链接？

任何帮助都会很棒，我很困惑。

Answer 1

我会使用 <li><a class="facebook" href="thisIsYourFacebookPage.html">My Facebook page</a></li>

并使用

提供您想要的图像

a.facebook:before { 
background: url("to/the/path/to/my/image");
width: 21px;
height: 21px;
display: inline-block;
content: " ";
}

像这样：http://jsfiddle.net/gVp2P/1/

Answer 2

据我所知，您无法为内容指定网址。但是你不需要在这里使用伪元素。只需具体说明每个<li>

的背景图片

.social-media ul li{
    display:inline-block;
    width: 21px;
    height: 21px;
}
.social-media ul li.facebook {
    background-image: url('../images/facebooklogo.png');
}

如果您希望它们成为可点击链接，那么您甚至不需要ul li。只需直接使用<a>，给它一个类，facebook，linkedin等，然后使用以下CSS。

.social-media a {
    display:inline-block;
    width: 21px;
    height: 21px;
}
.social-media a.facebook {
    background-image: url('../images/facebooklogo.png');
}

Answer 3

您还应该将图标视为字体而不是图像。

原因是它们可以更好地扩展，即使您的用户放大或使用视网膜显示也能看起来非常好，而且您可以像添加样式一样添加css颜色，阴影等。

在这里阅读： http://icomoon.io/