Question

我想创建链接中包含图标的链接。

例如，从Stack Overflow中获取chat / meta / faq链接的修改版本。

HTML

<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;
}

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

enter image description here

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

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

这不是唯一可以使用CSS实现的东西，而不是求助于javascript吗？

Answer 1

我们这里是一个基于@ sandeep的解决方案，没有额外的标记或伪元素。

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

Answer 2

像这样？??

http://jsfiddle.net/HBawG/

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

我尝试编辑你的作品

希望我帮助过。

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;
}

Answer 4

您应该删除div（图像）和超链接文本之间的回车符（以避免不需要的空格）然后你应该修改添加margin-right: 5px（例如）

的.so-icon类的css

您可以在此处找到示例的修改版本 http://jsfiddle.net/q2vE4/4/

包含图标的链接有什么好的“视觉设计模式”？

4 个答案: