사용자가 내 UI에서 부트스트랩 3 글리피콘의 하위 집합을 선택할 수 있도록 해야 합니다.
이렇게 해봤습니다:
<select class="form-control">
<option><span class="glyphicon glyphicon-cutlery"></span></option>
<option><span class="glyphicon glyphicon-eye-open"></span></option>
<option><span class="glyphicon glyphicon-heart-empty"></span></option>
<option><span class="glyphicon glyphicon-leaf"></span></option>
<option><span class="glyphicon glyphicon-music"></span></option>
<option><span class="glyphicon glyphicon-send"></span></option>
<option><span class="glyphicon glyphicon-star"></span></option>
</select>
그러나 내가 얻는 것은 빈 줄뿐입니다. 어떤 도움이나 대안 제안을 부탁드립니다.
제가 알기로는 기본 선택에서 이 기능을 구현하는 유일한 방법은 글꼴의 유니코드 표현을 사용하는 것입니다. 글리피콘 글꼴을 선택 항목에 적용해야 하므로 다른 글꼴과 혼합할 수 없습니다. 하지만 글리피콘에는 일반 문자가 포함되어 있으므로 텍스트를 추가할 수 있습니다. 안타깝게도 개별 옵션에 대한 글꼴 설정은 불가능한 것 같습니다.
<select class="form-control glyphicon">
<option value="">− − − Hello</option>
<option value="glyphicon-list-alt"> Text</option>
</select>
다음은 유니코드가 포함된 아이콘 목록입니다:
표준 HTML 선택은 HTML 콘텐츠를 표시하지 않는 것 같습니다. 부트스트랩 셀렉트를 확인해 보세요: http://silviomoreto.github.io/bootstrap-select/
선택 영역에 아이콘이나 기타 HTML 마크업을 표시하는 몇 가지 옵션이 있습니다.
<select id="mySelect" data-show-icon="true">
<option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
<option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>
데모는 다음과 같습니다: https://www.codeply.com/go/l6ClKGBmLS
결국 부트스트랩 3 드롭다운 버튼을 사용하게 되었는데, 나중에 누군가에게 도움이 될 경우를 대비해 여기에 제 해결책을 게시합니다. ul 클래스에 부트스트랩 3 목록 인라인을 추가하면 부트스트랩 3이 깔끔하게 컴팩트한 형식으로도 표시됩니다.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select icon <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li><span class="glyphicon glyphicon-cutlery"></span></li>
<li><span class="glyphicon glyphicon-fire"></span></li>
<li><span class="glyphicon glyphicon-glass"></span></li>
<li><span class="glyphicon glyphicon-heart"></span></li>
</ul>
</div>
저는 Angular.js를 사용하고 있으므로 이것이 제가 사용한 실제 코드입니다:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Avatar <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)">
<span ng-class="getAvatar(avatar)"></span>
</li>
</ul>
</div>
그리고 제 컨트롤러에서요:
$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud'];
$scope.getAvatar=function(avatar){
return 'glyphicon glyphicon-'+avatar;
};