如何在Bootstrap中给图标添加<a>链接？

Question

我有以下内容：

<a href="http://www.website.com" title="Website name">Website Link</a>

并且。

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>

有人能解释一下怎么在Bootstrap中与我正在使用的Font Awesome图标组合这些内容吗？我是把<a>放在<i>里面还是把<i>放在<a>里面，或者两者都需要放在<div>里面？

- user1943020

Answer 1

将<i>标签放到<a>标签内。

例如：

<a href="http://www.website.com" title="Website name"><i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a>

- Nitesh

---

谢谢。我尝试了这个，但是当我这样做时，我的图标下面出现了一条线 :-( - user1943020

这是应用的默认 a CSS 样式。您需要通过添加此 CSS 来重置它。a{text-decoration:none; border:none;} 希望这可以帮到您。- @Melina - Nitesh

Answer 2

使用此代码，只会显示图标：

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>

使用此代码，将显示一个文本链接：

With this, a text link will be displayed:

<a href="http://www.website.com" title="Website name">Website Link</a>

如果您想同时显示文本和图标，并将它们都作为链接，则可以使用以下代码，将标签放在标签内：

<a href="http://www.website.com" title="Website name"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a>

- Rituraj ratan