Html 如何将图标添加到引导程序下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30318231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i add icon to bootstrap dropdown
提问by user3214546
I have this code
我有这个代码
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
which looks like
看起来像
I want to add icon like cog insteaqd of Text like this
我想添加像 cog insteaqd 这样的 Text 图标
I have tried this
我试过这个
<button type="button" class="glyphicon glyphicon-cog"></button>
<button type="button" class="glyphicon glyphicon-cog"></button>
buts not working
但不工作
回答by JHS
For a button, the icon needs to go inside the button as the button's contents, so instead of <button type="button" class="glyphicon glyphicon-cog"></button>it should be
对于按钮，图标需要作为按钮的内容进入按钮内部，因此<button type="button" class="glyphicon glyphicon-cog"></button>应该是
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span>
</button>
Edit: to add the caret in Bootstrap, you use <span class="caret"></span>
编辑：要在 Bootstrap 中添加插入符号，您可以使用 <span class="caret"></span>
So the end result to get a button with a cog and dropdown caret is:
因此，获得带有齿轮和下拉插入符号的按钮的最终结果是：
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span><span class="caret"></span>
</button>
When I paste that code into Bootstrap's homepage, I get this:
当我将该代码粘贴到 Bootstrap 的主页时，我得到以下信息：
回答by arjun
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-cog"></span></button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
You can use this code
您可以使用此代码
