Html 什么'；“这是一个好消息。”；“视觉设计模式”；对于包含图标的链接？

我想创建包含图标的链接

例如，以Stack Overflow中的chat/meta/faq链接的修改版本为例

HTML

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

这种设计的一个问题是下划线（悬停在链接上查看）不仅出现在链接文本上，而且出现在之前的一些空白处

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

• 有两个独立的

• 完全不使用元素，而是使用javascript来实现链接功能，同时分别设置icon和text/span元素的样式

这难道不是只使用CSS就可以完成的事情，而不必求助于javascript吗？

像这样

我试着编辑你的作品

希望我能帮忙。

像这样

我试着编辑你的作品

---

希望我能帮上忙。

您应该删除div（图像）和超链接文本之间的回车符（以避免不必要的空格） 然后您应该修改.so图标类的css，添加

右边距：5px

（例如）

您可以在这里找到示例的修改版本

---

您应该删除div（图像）和超链接文本之间的回车符（以避免不必要的空格） 然后您应该修改.so图标类的css，添加

右边距：5px

（例如）

您可以在这里找到示例的修改版本

---

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

---

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

---

您可以将背景图像直接应用于标签。大概是这样的：

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

---

可以将背景图像直接应用于标记。大概是这样的：

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

---

我正在使用display:block；对于我的项目中的a元素，这对我来说非常有用；对于我项目中的a元素，这对我来说非常有效。记录在案，我实际上更喜欢

span

而不是

p

，但这是相同的原则。记录在案，我实际上更喜欢

span

而不是

p

，但这是相同的原则。我更喜欢@Bert的答案。我不希望我的HTML源代码都是一行，我更喜欢@Bert的答案。我不希望我的HTML源代码都是一行。@ripper234-和我的一样，因为HTML不包含一个虚假的

元素来保存图像。@Chowlett-我有点喜欢用一个div元素来保存图标。我想这是品味的问题。。。至少被接受的答案没有神奇的常数，比如

左填充：35px

；

左侧填充：35px

只为30px宽的图标和文本之间的5px填充留出了空间。对我来说，最好将a和.so图标组合成一个规则集，这样关系就更明显了。@ripper234-和我一样，因为HTML不包含一个虚假的

元素来保存图像。@Chowlett-我有点喜欢用一个div元素来保存图标。我想这是品味的问题。。。至少被接受的答案没有神奇的常数，比如

左填充：35px

；

左侧填充：35px

只为30px宽的图标和文本之间的5px填充留出了空间。我最好将a和.so图标组合成一个规则集，这样关系就更明显了。

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

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