부트 스트랩-Glyphicons

이 장에서는 Glyphicons, 사용 및 몇 가지 예에 대해 설명합니다. 부트 스트랩은 글꼴 형식으로 200 개의 글리프를 번들로 제공합니다. 이제 Glyphicon이 무엇인지 이해합시다.

Glyphicon은 무엇입니까?

Glyphicon은 웹 프로젝트에서 사용할 수있는 아이콘 글꼴입니다. Glyphicons Halflings 는 무료가 아니며 라이선스가 필요하지만 제작자가 무료로 부트 스트랩 프로젝트에 사용할 수 있도록했습니다.

"감사합니다. 가능할 때마다 GLYPHICONS로 돌아가는 선택적 링크를 포함하도록 요청합니다." — 부트 스트랩 문서

Glyphicons는 어디에서 찾을 수 있습니까?

이제 부트 스트랩 3.x 버전을 다운로드하고 환경 설정 장에서 디렉토리 구조를 이해 했으므로 glyphicons는 fonts 폴더 에서 찾을 수 있습니다 . 이것은 다음 파일을 포함합니다-

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

관련 CSS 규칙은 dist 폴더의 css 폴더에 있는 bootstrap.css 및 bootstrap-min.css 파일에 있습니다 . 이 링크 GLYPHICONS 에서 사용 가능한 글 리피 콘을 볼 수 있습니다 .

용법

아이콘을 사용하려면 코드의 거의 모든 위치에 다음 코드를 사용하면됩니다. 적절한 패딩을 위해 아이콘과 텍스트 사이에 공백을 두십시오.

<span class = "glyphicon glyphicon-search"></span>

다음 예제는 이것을 보여줍니다-

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>