Twitter 부트 스트랩 라디오/체크 박스 - 글리 phicon 삽입 방법

Question

결핵을 사용하면 라디오 나 체크 박스의 기본 스타일 대신 glyphicon을 표시하도록 라디오 나 체크 박스를 스타일링 할 수 있습니까? 선택을 취소하려면 glyphicon glyphicon-star을 사용하고, 확인하려면 glyphicon glyphicon-star-empty을 사용하고 싶습니다.

Answer 1

공식 웹 사이트에서 javascript 섹션에는 확인란 그룹과 라디오 버튼 스타일 그룹의 예제가 있습니다. 버튼 섹션 here 아래에 있습니다.

대신 "옵션 1"이라는 버튼 안에 텍스트가있는 대신 글리프콘을 배치하십시오. 하나의 확인란 만 원한다면 단추 그룹을 제거하고 단추 하나로 이동할 수 있다고 가정합니다.

단추 모양을 제거하고 아이콘 만 표시하려면 "btn-link"클래스를 사용하십시오.

본인은 직접 시도하지 않았지만 작동하지 않는 이유는 없습니다.

Answer 2

자바 스크립트를 사용하지 않으면 스타일을 수정할 수 있습니다. 제 의견에는 해킹이 많이 발생하지만 흥미로운 점은 boostrap이 아이콘 글꼴 #newb를 사용한다는 것을 알았 기 때문입니다.

HTML

<input type="checkbox" class="glyphicon glyphicon-star-empty" > 

CSS

.glyphicon:before { 
    visibility: visible; 
} 
.glyphicon.glyphicon-star-empty:checked:before { 
    content: "\e006"; 
} 
input[type=checkbox].glyphicon{ 
    visibility: hidden;   
} 

는 HERE

Answer 3

여기에 조건부 페이지의 내용을 표시하는 glyphicon하는 사이에 전환에 순수 각 솔루션입니다 그것을 밖으로보십시오. IE에서 CSS 솔루션이 실패한 것을 발견했습니다.

질문 이상의 것이지만 화면에서 무언가를 전환하는 것이 유용하다고 생각했습니다.

<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p> 

<div ng-show="toggle"> 
    //what you want to show here 
</div> 

Answer 4

동일한 문제가 있고 Google에서 온 사용자에게만 (나는 편리한 대답을 찾지 못했습니다.)

나는 이와 비슷한 것을 시험해보고 현재 Chrome, Firefox 및 IE에서이를 테스트했습니다. 이 방법을 사용하면 원하는 모든 것을 체크 박스로 사용할 수 있습니다. 클래스에 "checked"와 "unchecked"를 지정하십시오. 모든 체크 박스를 들어

이 수행

<input id="checkbox1" class="icon-checkbox" type="checkbox" /> 
<label for="checkbox1"> 
    <span class='glyphicon glyphicon-unchecked unchecked'></span> 
    <span class='glyphicon glyphicon-check checked'></span> 
    Checkbox 1 
</label> 

을 그리고 당신의 CSS에 추가 :

input[type='checkbox'].icon-checkbox{display:none} 
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline} 
input[type='checkbox'].icon-checkbox+label .checked{display:none} 
input[type='checkbox']:checked.icon-checkbox{display:none} 
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none} 
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}