将图标添加到引导下拉菜单项

Posted 2023-03-06

【中文标题】将图标添加到引导下拉菜单项

【英文标题】：Adding icons to bootstrap drop down menu items

【发布时间】：2013-05-09 09:11:25

【问题描述】：

我正在尝试将一些图标添加到引导下拉菜单中（请参阅下面的小提琴） 如您所见，添加了图标，但它会将菜单项推到右侧，并且该菜单项不再与其他项对齐。

这样做的适当方法是什么？

js fiddle

<div class="pull-left">
<div class="pull-right">
    <div class="btn-group">                 
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <span>Actions</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-ok"></i>Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li class="divider"></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </div>
</div>

【问题讨论】：

我发布了一个答案，但在重新阅读您的问题后，也许我没有回答您的问题。我不明白 - 向右移动了什么？你说的是下拉图标吗？我在您的 Fiddle 上没有看到任何图标。

我添加了一张图片来说明我的意思 - 谢谢

我没有在你的小提琴上看到那个复选框？我不会用<i> 标签来做。使用我的示例中的背景图像，它根本不会重新定位文本。我手动将文本移动了 5 个像素，但是如果您从我的答案中删除 padding-left，它根本不会被移动...

明白了 - 谢谢 - 将标记为答案

谢谢，很高兴能帮上忙。顺便说一句，我在底部的答案中添加了一个小更新。

【参考方案1】：

这是我在 Bootstrap 3.x 中的做法：

标记：

<ul class="dropdown-menu">
  <li><a href="#" class="icon"><span
         class="glyphicon glyphicon-user"></span>User Profile</a></li>
  <li><a href="#">Log Out</a></li>
</ul>

CSS：

.dropdown-menu a.icon 
  position: relative;
  padding-left: 40px;

.dropdown-menu a.icon .glyphicon 
  top: 6px;
  left: 10px;
  font-size: 18px;

关键是字形图标是绝对定位的，即使它们“包含”在标记中的<a> 内，默认情况下定位是相对于整个菜单的。通过将.icon 类添加到包含图标的每个菜单锚点，它允许您相对于该锚点进行定位，并填充锚点文本，以便图标有空间正确显示。正如您在上面看到的，任何不包含.icon 类或字形图标的菜单项都将正常显示为文本链接。

如果原始问题中的意图是始终让文本垂直对齐图标，只需将填充移动到.dropdown-menu a。

【参考方案2】：

这会奏效。不幸的是，您似乎需要在背景图像上使用!important，这通常是最好避免的。请注意，某些较旧的浏览器不支持 nth-of-type。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container 
    margin-top: 10px;


/* First Menu Item */
.dropdown-menu li:nth-of-type(1)  
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;


/* Second Menu Item */
.dropdown-menu li:nth-of-type(2)  
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;

JS 小提琴：http://jsfiddle.net/syVk8/

编辑：好的，经过一点澄清后，您根本不希望文本移动。这是一个类似的示例，左侧没有填充，还有一个名为“ok”的类，您可以将其应用于不同的菜单项以添加复选框（或任何您的图标）：

li.ok  
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;

JS 小提琴：http://jsfiddle.net/syVk8/2/