Изменение выпадающего значка bootstrap

Question

Я хочу попробовать изменить стрелку по умолчанию на кнопке меню выпадающего меню начальной загрузки? Это вообще возможно? Я надеюсь сделать что-то вроде значок андроида вращателя:

В противном случае, просто что-то из FontAwesome или что-то. Я не хочу использовать JQuery/I должны использовать Bootstrap выпадающие: http://getbootstrap.com/components/#dropdowns

я нашел много вопросов подобных тому, что я спрашиваю, что были более тесно связаны с JQuery - но если решение уже существует, не стесняйтесь указать мне на это.

Answer 1

Конечно, вы можете. Просто замените span с классом «caret» на что-то еще и немного поиграйте с css. Вместо того, чтобы:

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
Dropdown 
<span class="caret"></span> 
</button> 

использование:

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
Dropdown 
<i class="fa fa-external-link"></i> 
</button> 

JSFIDDLE

Answer 2

я имел почти идентичный вопрос, но искал чистый раствор CSS (посыпает с некоторым FontAwesome) против селектора .caret. Найден мой путь fiddling around с псевдоэлементом :before.

.caret { 
    border: none; 
} 

.caret:before { 
    font-family: FontAwesome; 
    content: "\f019"; 
    position: relative; 
    top: -9px; 
}