html - 将图标添加到 Bootstrap 选项卡

Question

这可能看起来微不足道，但我正在尝试将图标添加到 Bootstrap 选项卡，但我遇到了样式问题。

寻找具有以下内容的 CSS 解决方案:

1. 图标必须 float 到链接的右侧。

2. 不能将图标放在 anchor 标记内，它们必须保持在同一水平。

   <a></a><i></i>
   

   jsfiddle

如果有人能解决这个问题，我们将不胜感激。

Answer 1

因为 Bootstrap 为 li 选项卡内的 a 设置了样式，所以您必须重新设计选项卡以将样式应用到 a 而非 a li。

如果你不能那样做，那么你应该将图标包裹在 a 中。

你可以尝试添加:

display: inline-block;

到 li 标签内的 a。

nav>li>a {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
}