"폰트어썸 체크박스"의 두 판 사이의 차이

2017년 7월 23일 (일) 04:11 기준 최신판

1 개요[ | ]

FontAwesome Checkbox
폰트어썸 체크박스

폰트어썸 체크박스 아이콘 사용

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<style>
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 20px;
    content: "\f096";
}
input[type=checkbox]:checked + label:before { content: "\f046"; }
</style>

<input id="box1" type="checkbox" /><label for="box1"></label>
<br>
<input id="box2" type="checkbox" /><label for="box2">동의합니다.</label>
<br>
<input id="box3" type="checkbox" /><label for="box3">동의합니다.</label>

2 같이 보기[ | ]

3 참고[ | ]

http://codepen.io/jamesbarnett/pen/yILjk/

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
+;FontAwesome Checkbox
 ;폰트어썸 체크박스
-*폰트어썸 빌트인 체크박스 아이콘 사용
+*폰트어썸 체크박스 아이콘 사용
 <source lang='html5'>
@@ 16번째 줄: / 17번째 줄: @@
 </style>
-<input id="box1" type="checkbox" /><label for="box1">동의합니다.</label>
+<input id="box1" type="checkbox" /><label for="box1"></label>
 <br>
 <input id="box2" type="checkbox" /><label for="box2">동의합니다.</label>
@@ 22번째 줄: / 23번째 줄: @@
 <input id="box3" type="checkbox" /><label for="box3">동의합니다.</label>
 </source>
-<jsfiddle>b1mr73c7</jsfiddle>
+<jsfiddle height='150'>b1mr73c7</jsfiddle>
 ==같이 보기==
@@ 29번째 줄: / 30번째 줄: @@
 *[[HTML 체크박스]]
-==참고 자료==
+==참고==
 *http://codepen.io/jamesbarnett/pen/yILjk/
 [[분류: 폰트어썸]]
+[[분류: 체크박스]]