부트스트랩 기호 아이콘 문자 Glyphicons

<참조: http://bootstrapk.com/components/ >

부트스트랩 기호 아이콘 문자 Glyphicons

 

정리 수알치 오상문

 

사용가능한 기호

 

Glyphicon Halflings 세트로 폰트 형식에 250여개 이상의 기호를 포함하고 있습니다. 부트스트랩 Glyphicons Halflings은 부트스트랩 이용자를 위해 무료로 제공됩니다. (사이트: Glyphicons)

 

 

사용시 앞에 glyphicon 빈칸을 추가하세요

(예; <span class="glyphicon glyphicon-search" aria-hidden="true"></span>).

 

glyphicon-asterisk   glyphicon-plus  glyphicon-euro  glyphicon-eur  glyphicon-minus  glyphicon-cloud  glyphicon-envelope  glyphicon-pencil  glyphicon-glass  glyphicon-music  glyphicon-search  glyphicon-heart  glyphicon-star  glyphicon-star-empty  glyphicon-user  glyphicon-film  glyphicon-th-large  glyphicon-th  glyphicon-th-list  glyphicon-ok  glyphicon-remove  glyphicon-zoom-in  glyphicon-zoom-out   glyphicon-off  glyphicon-signal  glyphicon-cog  glyphicon-trash  glyphicon-home  glyphicon-file  glyphicon-time  glyphicon-road  glyphicon-download-alt  glyphicon-download  glyphicon-upload  glyphicon-inbox  glyphicon-play-circle  glyphicon-repeat  glyphicon-refresh  glyphicon-list-alt  glyphicon-lock  glyphicon-flag  glyphicon-headphones  glyphicon-volume-off  glyphicon-volume-down  glyphicon-volume-up  glyphicon-qrcode  glyphicon-barcode  glyphicon-tag  glyphicon-tags  glyphicon-book  glyphicon-bookmark  glyphicon-print  glyphicon-camera  glyphicon-font  glyphicon-bold  glyphicon-italic  glyphicon-text-height  glyphicon-text-width  glyphicon-align-left  glyphicon-align-center  glyphicon-align-right  glyphicon-align-justify  glyphicon-list  glyphicon-indent-left  glyphicon-indent-right  glyphicon-facetime-video  glyphicon-picture  glyphicon-map-marker  glyphicon-adjust  glyphicon-tint  glyphicon-edit  glyphicon-share  glyphicon-check  glyphicon-move  glyphicon-step-backward  glyphicon-fast-backward  glyphicon-backward   glyphicon-play  glyphicon-pause  glyphicon-stop  glyphicon-forward  glyphicon-fast-forward  glyphicon-step-forward  glyphicon-eject  glyphicon-chevron-left  glyphicon-chevron-right  glyphicon-plus-sign  glyphicon-minus-sign  glyphicon-remove-sign  glyphicon-ok-sign  glyphicon-question-sign  glyphicon-info-sign  glyphicon-screenshot  glyphicon-remove-circle  glyphicon-ok-circle  glyphicon-ban-circle  glyphicon-arrow-left  glyphicon-arrow-right  glyphicon-arrow-up  glyphicon-arrow-down  glyphicon-share-alt  glyphicon-resize-full  glyphicon-resize-small  glyphicon-exclamation-sign  glyphicon-gift  glyphicon-leaf  glyphicon-fire  glyphicon-eye-open  glyphicon-eye-close  glyphicon-warning-sign  glyphicon-plane  glyphicon-calendar  glyphicon-random  glyphicon-comment  glyphicon-magnet  glyphicon-chevron-up  glyphicon-chevron-down  glyphicon-retweet  glyphicon-shopping-cart  glyphicon-folder-close  glyphicon-folder-open  glyphicon-resize-vertical  glyphicon-resize-horizontal  glyphicon-hdd  glyphicon-bullhorn  glyphicon-bell  glyphicon-certificate  glyphicon-thumbs-up  glyphicon-thumbs-down  glyphicon-hand-right  glyphicon-hand-left  glyphicon-hand-up  glyphicon-hand-down  glyphicon-circle-arrow-right   glyphicon-circle-arrow-left  glyphicon-circle-arrow-up  glyphicon-circle-arrow-down  glyphicon-globe  glyphicon-wrench  glyphicon-tasks  glyphicon-filter  glyphicon-briefcase  glyphicon-fullscreen  glyphicon-dashboard  glyphicon-paperclip  glyphicon-heart-empty  glyphicon-link  glyphicon-phone  glyphicon-pushpin  glyphicon-usd  glyphicon-gbp  glyphicon-sort  glyphicon-sort-by-alphabet  glyphicon-sort-by-alphabet-alt  glyphicon-sort-by-order  glyphicon-sort-by-order-alt  glyphicon-sort-by-attributes  glyphicon-sort-by-attributes-alt  glyphicon-unchecked  glyphicon-expand  glyphicon-collapse-down  glyphicon-collapse-up  glyphicon-log-in  glyphicon-flash  glyphicon-log-out  glyphicon-new-window  glyphicon-record  glyphicon-save  glyphicon-open  glyphicon-saved  glyphicon-import  glyphicon-export  glyphicon-send  glyphicon-floppy-disk  glyphicon-floppy-saved  glyphicon-floppy-remove  glyphicon-floppy-save  glyphicon-floppy-open  glyphicon-credit-card  glyphicon-transfer  glyphicon-cutlery  glyphicon-header  glyphicon-compressed  glyphicon-earphone  glyphicon-phone-alt  glyphicon-tower  glyphicon-stats  glyphicon-sd-video  glyphicon-hd-video  glyphicon-subtitles  glyphicon-sound-stereo  glyphicon-sound-dolby  glyphicon-sound-5-1  glyphicon-sound-6-1  glyphicon-sound-7-1  glyphicon-copyright-mark  glyphicon-registration-mark  glyphicon-cloud-download  glyphicon-cloud-upload  glyphicon-tree-conifer  glyphicon-tree-deciduous  glyphicon-cd  glyphicon-save-file  glyphicon-open-file  glyphicon-level-up  glyphicon-copy  glyphicon-paste  glyphicon-alert  glyphicon-equalizer  glyphicon-king  glyphicon-queen  glyphicon-pawn  glyphicon-bishop  glyphicon-knight  glyphicon-baby-formula glyphicon-tent  glyphicon-blackboard  glyphicon-bed  glyphicon-apple  glyphicon-erase  glyphicon-hourglass   glyphicon-lamp  glyphicon-duplicate  glyphicon-piggy-bank  glyphicon-scissors  glyphicon-bitcoin  glyphicon-btc  glyphicon-xbt  glyphicon-yen  glyphicon-jpy  glyphicon-ruble  glyphicon-rub  glyphicon-scale  glyphicon-ice-lolly  glyphicon-ice-lolly-tasted  glyphicon-education  glyphicon-option-horizontal  glyphicon-option-vertical  glyphicon-menu-hamburger  glyphicon-modal-window  glyphicon-oil  glyphicon-grain  glyphicon-sunglasses  glyphicon-text-size  glyphicon-text-color  glyphicon-text-background  glyphicon-object-align-top  glyphicon-object-align-bottom  glyphicon-object-align-horizontal  glyphicon-object-align-left  glyphicon-object-align-vertical  glyphicon-object-align-right  glyphicon-triangle-right  glyphicon-triangle-left  glyphicon-triangle-bottom  glyphicon-triangle-top  glyphicon-console  glyphicon-superscript  glyphicon-subscript  glyphicon-menu-left   glyphicon-menu-right  glyphicon-menu-down  glyphicon-me

 

사용법

성능 이유로 모든 아이콘은 기본 클래스와 개개의 클래스를 필요로 합니다. 사용하려면, 다음 코드를  붙혀놓으면 됩니다. 적절한 패딩을 위해 아이콘과 글자 사이 공간을 남겨두세요.

다른 콤포넌트와 섞지 마세요

아이콘 클래스는 다른 콤포넌트와 직접 섞일수 없습니다. 같은 요소에 다른 클래스와 함께 사용되지 않을 것입니다. 대신 중첩된 <span>을 추가하고 <span>에 아이콘 클래스를 적용하세요.

빈 요소에만 사용하세요

아이콘 클래스는 텍스트나 자식 요소가 없는 요소에 사용해야 합니다.

아이콘 폰트 위치 변경하기

부트스트랩은 아이콘 폰트 파일은 컴파일된 CSS 파일의 상대적인 ../fonts/에 있을 것이라고 추정합니다. 이 폰트 파일을 옮기거나 이름을 바꾸는 방법은 3가지 방법중 하나로 하시면 됩니다.

• Less 파일에서 @icon-font-path 와 @icon-font-name 변수를 변경합니다.
• Less 컴파일러에서 제공되는 relative URLs 옵션 을 활용하세요.
• 컴파일된 CSS 에서 url() 경로를 변경하세요.

접근가능한 아이콘

스크린 리더에서 혼란스러운 출력을 피하기 위해, 우리는 aria-hidden="true" 속성으로 숨깁니다. 당신이 의미를 전달하는 아이콘을 사용한다면, .sr-only를 사용하여 그 의미가 전달되어야만 합니다. 만약 텍스트 없는 콘트롤(아이콘만 있는 <button>처럼)을 만든다면, 콘트롤 목적을 식별할 수 있는 대체 콘텐츠를 제공해야 합니다. 이 경우 콘트롤 자체에 aria-label 속성을 추가해도 됩니다.

 

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

예제

툴바와 네비게이션을 위해 버튼과 버튼 그룹에 사용하거나, 폼 입력요소 앞에 덧붙힙니다.

 

<button type="button" class="btn btn-default" aria-label="Left Align">

  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>

</button>

<button type="button" class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star

</button>

 

아이콘 경보(주의, 느낌표)는 에러메시지 의미를 전달하기 위해 사용됩니다. 그리고 .sr-only 텍스트를 작성합니다. .sr-only 클래스는 숨기고 싶은 태그 요소에 사용하여 화면에서는 보이지 않지만, 검색 엔진에서는 이 클래스명이 적용된 텍스트를 그대로 읽어옵니다(Error: Enter a valid email address).

 

<div class="alert alert-danger" role="alert">

  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

  <span class="sr-only">Error:</span>

  Enter a valid email address

</div>