Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 글리프 아이콘(Glyphicons)

이 장에서는 글꼴 아이콘(Glyphicons)을 설명하며, 몇 가지 예제를 통해 사용법을 이해할 수 있습니다.Bootstrap는 200 여러 가지 글꼴 형식의 글자 모양이 있습니다. 먼저 글꼴 아이콘이 무엇인지 이해해 보겠습니다.

글꼴 아이콘이 무엇인가요?

글꼴 아이콘은 웹 프로젝트에서 사용하는 아이콘 글꼴입니다. 하지만,Glyphicons Halflings 상업 허가가 필요하지만, 프로젝트 기반의 Bootstrap를 통해 무료로 이 아이콘을 사용할 수 있습니다.

아이콘 작가에 대한 감사를 표하기 위해, 사용할 때 GLYPHICONS 웹사이트의 링크를 추가해 주시기 바랍니다.

글꼴 아이콘을 가져왔습니다

이미 환경 설치 장 3x 버전을 이해하고 있으며, 그 디렉토리 구조를 이해했습니다.Bootstrap를 다운로드한 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 파일에 있습니다。

폰트 아이콘 목록

여기 클릭하여 사용 가능한 폰트 아이콘 목록을 확인하세요。

CSS 규칙 설명

아래의 CSS 규칙은 glyphicon 클래스를 구성합니다。

결과는 다음과 같습니다：

폰트 아이콘을 포함한 네비게이션 바

온라인 예제

예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>导航栏的字形图标</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　<!--　Bootstrap　--">
　　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<style>
　body　{
	padding-top:　50px;
　　　　padding-left:　50px;
}
</style>
<!--[if　lt　IE　9]>
	<script　src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--">
</head>
<body>
<div　class="navbar　navbar-fixed-top　navbar-inverse"　role="navigation">
	<div　class="container">
		<div　class="navbar-header">
			<button　type="button"　class="navbar-toggle"　data-toggle="collapse"　data-target=".navbar-collapse">
				<span　class="sr-only">Toggle　navigation</span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">Project　name</a>
		</div>
		<div　class="collapse　navbar-collapse">
			<ul　class="nav　navbar-nav">
				<li　class="active"><a　href="#"><span　class="glyphicon　glyphicon-home>/span>홈/a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-쇼핑-cart>/span>매장/a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-headphones>/span>지원/a></li>
			</ul>
		</div><!--　/.nav-축소　--">
	</div><!--　/.container　--">
</div>
<!--　jQuery　(Bootstrap 플러그인 사용 시 필요)　--">
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　모든 컴파일 플러그인 포함　--">
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

테스트해 보세요 ‹/›

폰트 아이콘 맞춤 설정

폰트 아이콘 사용 방법을 알아보았다면, 폰트 아이콘을 맞춤 설정하는 방법을 알아보겠습니다.

위의 예제를 시작으로 폰트 크기, 색상, 텍스트 쉼터지를 변경하여 아이콘을 맞춤 설정합니다.

아래는 시작 코드입니다：

<button　type="button">
　　<span></span>사용자
</button>

이와 같은 효과를 확인하세요：

폰트 크기 맞춤 설정

아이콘 폰트 크기를 증가하거나 감소시켜 아이콘을 더 크게 또는 작게 만들 수 있습니다.

<button　type="button"　style="font-size:　60px">
　　<span></span>사용자
</button>

폰트 맞춤 설정

<button　type="button"　style="color:　rgb(212,　106,　64);">
　　<span></span>사용자
</button>

텍스트 쉼터지 설정

<button　type="button"　style="text-shadow:　black　5px　3px　3px;">
　　<span></span>사용자
</button>

온라인 맞춤 폰트 아이콘

여기를 클릭하여 폰트 아이콘을 맞춤 설정하세요 »

图标列表

图标	类名	实例
	glyphicon glyphicon-asterisk	시도해 보세요
	glyphicon glyphicon-플러스	시도해 보세요
	glyphicon glyphicon-マイ너스	시도해 보세요
	glyphicon glyphicon-euro	시도해 보세요
	glyphicon glyphicon-(cloud)	시도해 보세요
	glyphicon glyphicon-envelope	시도해 보세요
	glyphicon glyphicon-pencil	시도해 보세요
	glyphicon glyphicon-glass	시도해 보세요
	glyphicon glyphicon-music	시도해 보세요
	glyphicon glyphicon-search	시도해 보세요
	glyphicon glyphicon-قلب	시도해 보세요
	glyphicon glyphicon-star	시도해 보세요
	glyphicon glyphicon-star-비어있음	시도해 보세요
	glyphicon glyphicon-user	시도해 보세요
	glyphicon glyphicon-film	시도해 보세요
	glyphicon glyphicon-th-large	시도해 보세요
	glyphicon glyphicon-th	시도해 보세요
	glyphicon glyphicon-th-리스트	시도해 보세요
	glyphicon glyphicon-확认	시도해 보세요
	glyphicon glyphicon-제거	시도해 보세요
	glyphicon glyphicon-zoom-안으로	시도해 보세요
	glyphicon glyphicon-zoom-밖으로	시도해 보세요
	glyphicon glyphicon-끄기	시도해 보세요
	glyphicon glyphicon-signal	시도해 보세요
	glyphicon glyphicon-cog	시도해 보세요
	glyphicon glyphicon-trash	시도해 보세요
	glyphicon glyphicon-home	시도해 보세요
	glyphicon glyphicon-file	시도해 보세요
	glyphicon glyphicon-time	시도해 보세요
	glyphicon glyphicon-road	시도해 보세요
	glyphicon glyphicon-다운로드-대체 텍스트	시도해 보세요
	glyphicon glyphicon-다운로드	시도해 보세요
	glyphicon glyphicon-업로드	시도해 보세요
	glyphicon glyphicon-inbox	시도해 보세요
	glyphicon glyphicon-재생-원형	시도해 보세요
	glyphicon glyphicon-반복	시도해 보세요
	glyphicon glyphicon-새로고침	시도해 보세요
	glyphicon glyphicon-리스트-대체 텍스트	시도해 보세요
	glyphicon glyphicon-잠금	시도해 보세요
	glyphicon glyphicon-flag	시도해 보세요
	glyphicon glyphicon-헤드폰	시도해 보세요
	glyphicon glyphicon-볼륨-끄기	시도해 보세요
	glyphicon glyphicon-볼륨-아래로	시도해 보세요
	glyphicon glyphicon-볼륨-위로	시도해 보세요
	glyphicon glyphicon-QR코드	시도해 보세요
	glyphicon glyphicon-바코드	시도해 보세요
	glyphicon glyphicon-태그	시도해 보세요
	glyphicon glyphicon-태그	시도해 보세요
	glyphicon glyphicon-책	시도해 보세요
	glyphicon glyphicon-북마크	시도해 보세요
	glyphicon glyphicon-프린트	시도해 보세요
	glyphicon glyphicon-카메라	시도해 보세요
	glyphicon glyphicon-글꼴	시도해 보세요
	glyphicon glyphicon-볼드	시도해 보세요
	glyphicon glyphicon-이탈릭	시도해 보세요
	glyphicon glyphicon-텍스트-높이	시도해 보세요
	glyphicon glyphicon-텍스트-너비	시도해 보세요
	glyphicon glyphicon-정렬-왼쪽	시도해 보세요
	glyphicon glyphicon-정렬-중앙	시도해 보세요
	glyphicon glyphicon-정렬-오른쪽	시도해 보세요
	glyphicon glyphicon-정렬-정렬	시도해 보세요
	glyphicon glyphicon-리스트	시도해 보세요
	glyphicon glyphicon-들여쓰기-왼쪽	시도해 보세요
	glyphicon glyphicon-들여쓰기-오른쪽	시도해 보세요
	glyphicon glyphicon-피스푸어-비디오	시도해 보세요
	glyphicon glyphicon-사진	시도해 보세요
	glyphicon glyphicon-지도-마커	시도해 보세요
	glyphicon glyphicon-조정	시도해 보세요
	glyphicon glyphicon-톤	시도해 보세요
	glyphicon glyphicon-수정	시도해 보세요
	glyphicon glyphicon-공유	시도해 보세요
	glyphicon glyphicon-체크	시도해 보세요
	glyphicon glyphicon-이동	시도해 보세요
	glyphicon glyphicon-단계-뒤로	시도해 보세요
	glyphicon glyphicon-빠르게-뒤로	시도해 보세요
	glyphicon glyphicon-뒤로	시도해 보세요
	glyphicon glyphicon-재생	시도해 보세요
	glyphicon glyphicon-일시정지	시도해 보세요
	glyphicon glyphicon-정지	시도해 보세요
	glyphicon glyphicon-앞으로	시도해 보세요
	glyphicon glyphicon-빠르게-앞으로	시도해 보세요
	glyphicon glyphicon-단계-앞으로	시도해 보세요
	glyphicon glyphicon-제거	시도해 보세요
	glyphicon glyphicon-화단-왼쪽	시도해 보세요
	glyphicon glyphicon-화단-오른쪽	시도해 보세요
	glyphicon glyphicon-플러스-서명	시도해 보세요
	glyphicon glyphicon-マイ너스-서명	시도해 보세요
	glyphicon glyphicon-제거-서명	시도해 보세요
	glyphicon glyphicon-확认-서명	시도해 보세요
	glyphicon glyphicon-질문-서명	시도해 보세요
	glyphicon glyphicon-정보-서명	시도해 보세요
	glyphicon glyphicon-스크린샷	시도해 보세요
	glyphicon glyphicon-제거-원형	시도해 보세요
	glyphicon glyphicon-확认-원형	시도해 보세요
	glyphicon glyphicon-금지-원형	시도해 보세요
	glyphicon glyphicon-아이콘-왼쪽	시도해 보세요
	glyphicon glyphicon-아이콘-오른쪽	시도해 보세요
	glyphicon glyphicon-아이콘-위로	시도해 보세요
	glyphicon glyphicon-아이콘-아래로	시도해 보세요
	glyphicon glyphicon-공유-대체 텍스트	시도해 보세요
	glyphicon glyphicon-크기 조정-전체	시도해 보세요
	glyphicon glyphicon-크기 조정-작은	시도해 보세요
	glyphicon glyphicon-exclamation-서명	시도해 보세요
	glyphicon glyphicon-선물	시도해 보세요
	glyphicon glyphicon-잎	시도해 보세요
	glyphicon glyphicon-화염	시도해 보세요
	glyphicon glyphicon-눈-열림	시도해 보세요
	glyphicon glyphicon-눈-닫기	시도해 보세요
	glyphicon glyphicon-경고-서명	시도해 보세요
	glyphicon glyphicon-비행기	시도해 보세요
	glyphicon glyphicon-달력	시도해 보세요
	glyphicon glyphicon-임의	시도해 보세요
	glyphicon glyphicon-댓글	시도해 보세요
	glyphicon glyphicon-магнет	시도해 보세요
	glyphicon glyphicon-화단-위로	시도해 보세요
	glyphicon glyphicon-화단-아래로	시도해 보세요
	glyphicon glyphicon-리트윗	시도해 보세요
	glyphicon glyphicon-쇼핑-카트	시도해 보세요
	glyphicon glyphicon-폴더-닫기	시도해 보세요
	glyphicon glyphicon-폴더-열림	시도해 보세요
	glyphicon glyphicon-크기 조정-수직	시도해 보세요
	glyphicon glyphicon-크기 조정-수평	시도해 보세요
	glyphicon glyphicon-하드디스크	시도해 보세요
	glyphicon glyphicon-휘파람	시도해 보세요
	glyphicon glyphicon-bell	시도해 보세요
	glyphicon glyphicon-인증서	시도해 보세요
	glyphicon glyphicon-손가락-위로	시도해 보세요
	glyphicon glyphicon-손가락-아래로	시도해 보세요
	glyphicon glyphicon-손-오른쪽	시도해 보세요
	glyphicon glyphicon-손-왼쪽	시도해 보세요
	glyphicon glyphicon-손-위로	시도해 보세요
	glyphicon glyphicon-손-아래로	시도해 보세요
	glyphicon glyphicon-원형-아이콘-오른쪽	시도해 보세요
	glyphicon glyphicon-원형-아이콘-왼쪽	시도해 보세요
	glyphicon glyphicon-원형-아이콘-위로	시도해 보세요
	glyphicon glyphicon-원형-아이콘-아래로	시도해 보세요
	glyphicon glyphicon-세계	시도해 보세요
	glyphicon glyphicon-도구	시도해 보세요
	glyphicon glyphicon-과제	시도해 보세요
	glyphicon glyphicon-필터	시도해 보세요
	glyphicon glyphicon-가방	시도해 보세요
	glyphicon glyphicon-전체화면	시도해 보세요
	glyphicon glyphicon-대시보드	시도해 보세요
	glyphicon glyphicon-페이퍼클립	시도해 보세요
	glyphicon glyphicon-قلب-비어있음	시도해 보세요
	glyphicon glyphicon-링크	시도해 보세요
	glyphicon glyphicon-폰	시도해 보세요
	glyphicon glyphicon-핀	시도해 보세요
	glyphicon glyphicon-usd	시도해 보세요
	glyphicon glyphicon-gbp	시도해 보세요
	glyphicon glyphicon-정렬	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-알파벳	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-알파벳-대체 텍스트	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-순서	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-순서-대체 텍스트	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-속성	시도해 보세요
	glyphicon glyphicon-정렬-에 의해-속성-대체 텍스트	시도해 보세요
	glyphicon glyphicon-체크되지 않음	시도해 보세요
	glyphicon glyphicon-확장	시도해 보세요
	glyphicon glyphicon-축소-아래로	시도해 보세요
	glyphicon glyphicon-축소-위로	시도해 보세요
	glyphicon glyphicon-로그-안으로	시도해 보세요
	glyphicon glyphicon-플래시	시도해 보세요
	glyphicon glyphicon-로그-밖으로	시도해 보세요
	glyphicon glyphicon-새로운-창	시도해 보세요
	glyphicon glyphicon-녹음	시도해 보세요
	glyphicon glyphicon-저장	시도해 보세요
	glyphicon glyphicon-열림	시도해 보세요
	glyphicon glyphicon-저장된	시도해 보세요
	glyphicon glyphicon-가져오기	시도해 보세요
	glyphicon glyphicon-내보내기	시도해 보세요
	glyphicon glyphicon-보내기	시도해 보세요
	glyphicon glyphicon-플로피-디스크	시도해 보세요
	glyphicon glyphicon-플로피-저장된	시도해 보세요
	glyphicon glyphicon-플로피-제거	시도해 보세요
	glyphicon glyphicon-플로피-저장	시도해 보세요
	glyphicon glyphicon-플로피-열림	시도해 보세요
	glyphicon glyphicon-크레딧-카드	시도해 보세요
	glyphicon glyphicon-전송	시도해 보세요
	glyphicon glyphicon-컷러리	시도해 보세요
	glyphicon glyphicon-헤더	시도해 보세요
	glyphicon glyphicon-압축된	시도해 보세요
	glyphicon glyphicon-이어폰	시도해 보세요
	glyphicon glyphicon-폰-대체 텍스트	시도해 보세요
	glyphicon glyphicon-탑	시도해 보세요
	glyphicon glyphicon-통계	시도해 보세요
	glyphicon glyphicon-SD-비디오	시도해 보세요
	glyphicon glyphicon-HD-비디오	시도해 보세요
	glyphicon glyphicon-자막	시도해 보세요
	glyphicon glyphicon-사운드-스테레오	시도해 보세요
	glyphicon glyphicon-사운드-독백	시도해 보세요
	glyphicon glyphicon-사운드-5-1	시도해 보세요
	glyphicon glyphicon-사운드-6-1	시도해 보세요
	glyphicon glyphicon-사운드-7-1	시도해 보세요
	glyphicon glyphicon-저작권-표시	시도해 보세요
	glyphicon glyphicon-등록-표시	시도해 보세요
	glyphicon glyphicon-(cloud)-다운로드	시도해 보세요
	glyphicon glyphicon-(cloud)-업로드	시도해 보세요
	glyphicon glyphicon-나무-针叶树	시도해 보세요
	glyphicon glyphicon-나무-잎이 떨어지는	시도해 보세요

Bootstrap 드롭다운 메뉴 Bootstrap 반응형 도구