1

부트 스트랩 3에서 이것은 매우 쉽습니다. 대신 스팬을 변경하고 대신 원하는 아이콘을 추가해야했습니다. 하지만 Bootstrap 4에서는 그렇지 않습니다. 아니면 뭔가를 놓친 것입니까?부트 스트랩 4의 드롭 다운 아이콘 변경

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

누군가가이 방법에 드롭 다운 아이콘을 변경할 수 있는지 말해 주시겠습니까 :

어쨌든, 여기에 대한 기본 코드는? fontawesome에서 하나를 추가하고 싶습니다.

감사합니다.

답변

1

당신은이 같은 캐럿 아이콘을 숨길 필요가 ...

.dropdown-toggle::after { 
    display: none; 
} 

는 그 다음 fontawesome 아이콘을 추가 ..

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    <i class="fa fa-heart"></i> 
</button> 

http://www.codeply.com/go/xd2b75iUbM

또는을 바로 제거 dropdown-toggle 클래스에서 버튼을 사용하는 것만으로 보이는 것 같습니다. caret 아이콘을 표시합니다.

+0

그게 전부 야! 고마워요, ZimSystem. – Retros

+0

display : 아무 것도 드롭 다운 토글 클래스를 제거하면 중첩 된 드롭 다운 (드롭 다운 내 드롭 다운)이 작동하지 않으므로 더 나은 솔루션이 아닙니다. – astralmaster

관련 문제