对于包含图标的链接，什么是好的“视觉设计模式”？

Question

我想要创建的链接，其中包括图标的链接。

例如，从堆栈溢出中获取chat/meta/faq链接的修改版本。

这里有一次尝试。

<div id='clickable'>
  <a href="#chat">
    <div class='so-icon'></div>
    chat
  </a>
  ...
</div>

CSS

#clickable div {
  display:inline-block;
  vertical-align: middle;
}
.so-icon {
  background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
  width: 30px;
  height: 30px;
}
a {
  text-decoration: none;    
  margin-right: 10px;
}
a:hover {
  text-decoration: underline;
}

这种设计的一个问题是，下划线(悬停在链接上查看)不仅出现在链接文本上，还出现在之前的一些空格上。

​

​

我能想到的几个解决方案是：

• 有两个单独的<a>元素，一个用于图标，一个用于文本。违反了干的。
• 完全不使用元素，而是使用javascript来实现链接功能，同时分别设置图标和文本/span元素的样式。

这难道不是只需要使用CSS就可以实现的，而不需要求助于javascript吗？

Answer 1

是像这样吗？?

http://jsfiddle.net/HBawG/

a p:hover {
  text-decoration: underline;
}

我试着编辑你的作品

希望我帮了你。

Answer 2

这是一种没有附加标记或伪元素的解决方案，基于@sandeep's。

http://jsfiddle.net/z4Gs2/2/

Answer 3

您可以将背景图像直接应用于标记。就像这样：

<a href="#chat" class="so-icon">chat</a>
<a href="#meta" class="so-icon">meta</a>
<a href="#faq" class="so-icon">faq</a>

使用CSS：

.so-icon {
  background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
  width: 30px;
  height: 30px;
}
a {
  display: inline-block;
  text-decoration: none;
  padding-left: 35px;
  margin:10px;
  line-height: 30px;
}
a:hover {
  text-decoration: underline;
}