부트 스트랩 글 리피 콘
래스터 이미지 형식, 벡터 이미지 형식 및 글꼴로 사용할 수있는 단색 아이콘 라이브러리입니다. 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>다음과 같은 출력이 생성됩니다.