html - 创建可点击元素列表

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:after 指定的图像，只有 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/