부트 스트랩 글 리피 콘

래스터 이미지 형식, 벡터 이미지 형식 및 글꼴로 사용할 수있는 단색 아이콘 라이브러리입니다. 250 개 이상의 글리프를 글꼴 형식으로 제공합니다. 웹 프로젝트에서 이러한 글꼴을 사용할 수 있습니다. 이 글리프는 무료가 아니지만 부트 스트랩 기반 프로젝트에서 사용하는 경우에 대비하여 아무것도 지출 할 필요가없는 경우입니다.

글꼴로드 (라이브러리)

Bootstrap Glyphicons 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣으십시오.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

아이콘 사용

Bootstrap Glyphicons는 여러 아이콘을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스 이름을 추가하십시오. 다음 예에서는 트리 아이콘을 사용했으며 클래스 이름은tree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

다음과 같은 출력이 생성됩니다.

크기 정의

CSS에서 아이콘의 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 다음 예에서는 크기를 6 em으로 정의했습니다.

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

다음과 같은 출력이 생성됩니다.

색상 정의

CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예제는 트리 아이콘의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

다음과 같은 출력이 생성됩니다.