У меня есть этот код
<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>
который выглядит как
Я хочу добавить иконку, такую как cog insteaqd из текста, как это
Я пробовал это
<button type="button" class="glyphicon glyphicon-cog"></button>
но не работает
Для кнопки значок должен находиться внутри кнопки в виде содержимого кнопки, поэтому вместо <button type="button" class="glyphicon glyphicon-cog"></button>
это должно быть
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span>
</button>
Изменить: чтобы добавить каретку в Bootstrap, вы используете <span class="caret"></span>
Таким образом, конечный результат, чтобы получить кнопку с шестнадцатеричным и выпадающим меню, выглядит следующим образом:
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span><span class="caret"></span>
</button>
Когда я вставляю этот код в домашнюю страницу Bootstrap, я получаю следующее:
<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>
Вы можете использовать этот код
Просто добавьте этот тег span
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
Смотрите DEMO