在Bootstrap下拉菜单中添加图标

Question

我想在Bootstrap下拉菜单中为链接添加一些图标，使用类似以下的代码：

<ul>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><i class="icon-arrow-up"></i><a href="#">Up</a></li>
            <li><i class="icon-arrow-down"></i><a href="#">Down</a></li>
            <li><i class="icon-arrow-left"></i><a href="#">Left</a></li>
            <li><i class="icon-arrow-right"></i><a href="#">Right</a></li>
        </ul>
    </li>
</ul>

然而，图标的位置不正确：

我尝试使用这个答案中的解决方案，但它似乎不起作用。是否有人可以提供一个解决方案并解释为什么/如何工作呢？

演示

谢谢！

- wrongusername

Answer 1

把图标放在锚点标签内：

<ul>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-arrow-up"></i> Up</a></li>
            <li><a href="#"><i class="icon-arrow-down"></i> Down</a></li>
            <li><a href="#"><i class="icon-arrow-left"></i> Left</a></li>
            <li><a href="#"><i class="icon-arrow-right"></i> Right</a></li>
        </ul>
    </li>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

- N1ck

---

Twitter Bootstrap特别使用i标签，因为它是一个内联元素。这样，你可以在<p>和<a>标签内部使用它，而且仍然是语义上正确的。这绝对是我会使用的方法。 - Brad Barrow

@N1ck，但为什么这种方式在Firefox上不起作用：http://jsfiddle.net/ywkLt/40/？有什么线索可以修复它吗？谢谢。 - igrek

@BradBarrow的语法可能是正确的，但我认为使用“i”代表图标在语义上并不准确 :) - Rob Grant

我建议将以下CSS添加到您的网站中，以便图标大致对齐。如果您有遮罩和分层，则效果可能不太好。.dropdown-item i { min-width: 20px; text-align: center; } - Red

Answer 2

用于定位

定义你的.dropdown-menu li，将position属性设为relative，然后我将position属性设为absolute

就像这样

.dropdown-menu a {
    white-space:normal;
}
.dropdown-menu > li{position:relative;}

.dropdown-menu > li > i{position:absolute;left:0;top:3px;}

演示版

- Rohit Azad Malik

---

使用这种方法，点击图标不会产生与点击链接相同的效果。 - N1ck

@N1ck，我们中的一些人可能希望那种行为。 - Justin

Answer 3

将Bootstrap v3中的图标放置在锚点标签内（使用http://www.FontAwesome.com提供的图标）：

        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">A Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-arrow-up"></i> Up</a></li>
                    <li><a href="#"><i class="fa fa-arrow-down"></i> Down</a></li>
                    <li><a href="#"><i class="fa fa-arrow-left"></i> Left</a></li>
                    <li><a href="#"><i class="fa fa-arrow-right"></i> Right</a></li>
                </ul>
            </li>
        </ul>

示例：http://jsfiddle.net/9ce3P/

- Zymotik

Answer 4

<ul class="dropdown-menu" role="menu">
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="javascript:void(0)">
            <span class="pull-right">Edit</span>
            <span class="glyphicon glyphicon-edit pull-left"></span>
            <span class="clearfix"></span>
        </a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="javascript:void(0)">
            <span class="pull-right">Delete</span>
            <span class="glyphicon glyphicon-remove pull-left"></span>
            <span class="clearfix"></span>
        </a>
    </li>
</ul>

- Mohammad Dayyan