부트스트랩 글꼴 아이콘

이 장에서는 글꼴 아이콘(Glyphicon)을 설명하고 몇 가지 예를 통해 그 사용법을 이해합니다. Bootstrap에는 200개 이상의 글꼴 형식의 글리프가 번들로 제공됩니다. 먼저 글꼴 아이콘이 무엇인지 먼저 이해하겠습니다.

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

글꼴 아이콘은 웹 프로젝트에서 사용되는 아이콘 글꼴입니다. Glyphicons Halflings에는 상업용 라이센스가 필요하지만 프로젝트 기반 부트스트랩을 통해 이러한 아이콘을 무료로 사용할 수 있습니다.

아이콘 작성자에게 감사의 마음을 전하기 위해 이용 시 GLYPHICONS 웹사이트 링크를 포함해주시길 바랍니다.

글꼴 아이콘 가져오기

환경 설치 장에서 Bootstrap 3.x 버전을 다운로드하고 디렉토리 구조를 이해했습니다. 글꼴 아이콘은 다음 파일을 포함하는 폰트 폴더에서 찾을 수 있습니다. ttf

glyphicons-halflings-regular.woff
관련 CSS 규칙은
dist
폴더 내 css 폴더의
및
bootstrap-min.css
파일에 작성되어 있습니다.
글꼴 아이콘 목록
사용 가능한 글꼴 아이콘 목록을 보려면 여기를 클릭하세요.

CSS 규칙 설명다음 CSS 규칙은 glyphicon 클래스를 구성합니다. @font-face { 글꼴 계열: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

src: url('../fonts/ glyphicons-halflings-regular.eot?#iefix') 형식('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') 형식('woff'), url('.. /fonts/glyphicons-halflings-regular.ttf') 형식('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 형식('svg');

}

. glyphicon {

위치: 상대;

상단: 1px;

디스플레이: inline-block;

글꼴 계열: 'Glyphicons Halflings';

-webkit-font-smoothing: antialiased;

글꼴 스타일: 일반;

글꼴 무게 : 보통;
줄 높이: 1;
-moz-osx-font-smoothing: 회색조;
}

따라서 글꼴 규칙은 실제로 글꼴 모음과 글리피콘이 있는 위치를 선언합니다.

.glyphicon 클래스는 위에서 1px 떨어진 상대 위치 오프셋을 선언하고 이를 인라인 블록으로 렌더링하고 글꼴을 선언하고 글꼴 스타일과 글꼴 두께를 정상적으로 지정하고 줄 높이를 1로 설정합니다. 그렇지 않으면 브라우저 간 일관성을 위해 -webkit-font-smoothing: antialiased 및 -moz-osx-font-smoothing: greyscale;을 사용하세요.

그럼 여기

.glyphicon:empty {
width: 1em;
}

은 빈 글리피콘입니다.

여기에는 200개의 클래스가 있으며 각 클래스는 아이콘을 위한 것입니다. 이러한 클래스의 일반적인 형식은 다음과 같습니다.

.glyphicon-keyword:before {
content: "hexvalue";
}

예를 들어 사용된 사용자 아이콘에는 다음 클래스가 있습니다.

.glyphicon- 사용자:이전 {
콘텐츠: "e008";
}

Usage

아이콘을 사용하려면 아래 코드를 사용하세요. 아이콘과 텍스트 사이에 적절한 공간을 남겨주세요.

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

다음 예에서는 글꼴 아이콘을 사용하는 방법을 보여줍니다.

& lt;! doctype html & gt;

& lt; html & gt;

& lt; head & gt;
& lt; title & gt; bootstrap 实例-如何使用字体图标 & lt; title & gt;
& lt; link href = "http://libs.baid. com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min. js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></ head>
<body>

<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">
   </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> 사용자
</button>

</body>

</html>

实例

🎜

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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>


</body>
</html>

🎜
인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

带有导航栏的字体图标

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的体图标</title >
    <메타 이름=" viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="http://apps.bdimg.com/libs/bootstrap /3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    본문 {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    
  </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">탐색 전환</span>
            <span class="icon-bar"</span>
            <span class="icon -bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" >프로젝트 이름</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

实例

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://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">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>
    <!-- jQuery (Bootstrap 插件需要引入) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

글꼴 크기 사용자 정의

글꼴 크기를 늘리거나 줄여 아이콘을 더 크게 또는 더 작게 보이게 할 수 있습니다.

맞춤형 글꼴 색상

텍스트 그림자 적용

<버튼 유형="버튼" class=" btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> User
</button>

온라인 사용자 정의 글꼴 아이콘

아이콘 목록

<td

사용해 보세요사용해보기사용해보기글리피콘유리glyphicon glyphicon -music글리피콘 글리피콘 검색글리피콘 글리피콘 하트glyphicon glyphicon-star glyphicon glyphicon-film 사용해 보세요 ㅋㅋㅋ ㅋㅋㅋ 리피콘타임 glyphicon glyphicon-roadglyphicon glyphicon-download-altglyphicon glyphicon-download glyphicon glyphicon-uploadglyphicon glyphicon-inboxglyphicon 르 glyphicon glyphicon-repeatglyphicon glyphicon-refreshglyphicon-list -alt glyphicon glyphicon-lockglyphicon glyphicon-flagglyphicon-headphones글리피콘 글리피콘 -볼륨 끄기 ㅎㅎ glyphicon glyphicon-tagsglyphicon glyphicon-bookglyphicon glyphicon-bookmarkglyphicon- 인쇄 glyphicon glyphicon-cameraglyphicon glyphicon-fontglyphicon-boldglyphicon glyphicon -italicglyphicon glyphicon-text-heightglyphicon glyphicon-text-width glyphicon glyphicon-align- leftglyphicon glyphicon-align-centerglyphicon glyphicon-align-right글리피콘 glyphicon-align-justifyglyphicon-listgly phicon glyphicon-indent-leftㅋㅋㅋ glyphi con-picture glyphicon glyphicon-checkglyphicon glyphicon-moveglyphicon glyphicon-step-backward glyphicon glyphicon- fast-backward글리피콘 글리피콘 선물사용해 보세요 glyphicon glyphicon-leaf해 보세요사용해 보세요 ㅋㅋㅋ -자석glyphicon glyphicon-chevron-upglyphicon glyphicon-chevron-downglyphicon -리트윗glyphicon glyphicon-쇼핑카트glyphicon glyphicon-폴더 닫기glyphicon glyphicon-폴더 열기glyphicon glyphicon-hdd 주기 시도해 보세요glyphicon glyphicon-bullhorn해 보세요glyphicon glyphicon-bell해 보세요glyphicon glyphicon 인증서사용해 보세요 그거 ㅋㅋㅋ phicon-hand-right ㅋㅋㅋ -알파벳-알트별 정렬 시도해 보세요 glyphicon glyphicon-sort-by-order해 보세요glyphicon glyphicon-sort-by-order-alt해 보세요glyphicon 글리피콘- 선택 해제해 보세요 glyphicon glyphicon-expand해 보세요glyphicon-collapse-down해 보세요glyphicon glyphicon-collapse -up 사용해 보세요glyphicon glyphicon-log-in 사용해 보세요glyphicon glyphicon-flash 사용해 보세요 글리피콘 글리피콘 -로그아웃 사용해 보세요glyphicon glyphicon-new-window사용해 보세요glyphicon-recordT RY glyphicon glyphicon-save 사용해 보세요glyphicon glyphicon-open 사용해 보세요

icon	클래스 이름	instance
	glyphicon glyphicon-asterisk	사용해 보세요
	글리피콘 글리피콘플러스	사용해보세요
ㅋㅋㅋ con glyphicon-cloud
글리피콘 글리피콘봉투
글리피콘 글리피콘연필
사용해보세요
사용해 보세요
사용해 보세요
사용해 보세요
시도해보세요 itㅋㅋㅋ
glyphicon glyphicon-th -list	사용해 보세요
글리피콘 글리피콘-ok	사용해 보세요
글리피콘 글리피콘 제거	사용해 보세요
ㅋㅋㅋ glyphi con-off	사용해 보세요
glyphicon glyphicon-signal	사용해 보세요
glyphicon-cog	사용해 보세요
glyphi con glyphicon-trash	사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요
해 보세요
사용해 보세요
사용해 보세요
해 보세요
사용해 보세요
사용해 보세요
해 보세요
사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요			glyphicon glyphicon-볼륨 다운	사용해 보세요
	glyphicon glyphicon-볼륨 업	사용해 보세요
	glyphicon glyphi con-qrcode	사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요
사용해 보세요

사용해 보세요
사용해 보세요

해 보세요
해 보세요
해 보세요
사용해 보세요
사용해 보세요
사용해 보세요			사용해 보세요
glyphicon glyphicon-map-marker	사용해 보세요
glyphicon-adjust	사용해 보세요
글리피콘 글리피콘틴트	사용해보세요
사용해 보세요
사용해 보세요
해 보세요
사용해 보세요	glyphicon glyphicon-pause	사용해 보세요
	glyphicon glyphicon-stop	사용해 보세요
	glyphicon glyphicon-forward	사용해 보세요
	glyphicon glyphicon-fast-forward	사용해 보세요
	glyphicon-step-forward	try 그거
	글리피콘 글리피콘 -eject	해 보세요
	glyphicon glyphicon-che vron-left	해 보세요
ㅋㅋㅋ Lyphi con-minus-sign	사용해 보세요
glyphicon glyphicon-remove-sign	사용해 보세요
glyphicon glyphicon-ok-sign	사용해 보세요
glyphicon glyphicon-질문-기호	사용해 보세요
glyphicon glyphicon-info-sign	사용해 보세요
glyphicon glyphicon-screenshot	사용해 보세요
glyphicon glyphicon-제거- 서클	사용해 보세요
glyphicon glyphicon-ok-circle	사용해 보세요
glyphicon-ban-circle	사용해 보세요
글리피콘 글리피콘 -arrow-left	해봐
glyphicon glyphicon-arrow-right	해봐
glyphicon glyphicon-arrow-up	해봐
ㅋㅋㅋ Lyphicon -resize-full 사용해 보세요	ㅋㅋㅋ

		glyphicon glyphicon-fire	해 보세요
	glyphicon glyphicon-eye-open	해 보세요
	glyphicon-eye-	해 보세요
ㅋㅋㅋ phicon-calendar
사용해보세요
사용해 보세요
사용해 보세요
해보세요
사용해 보세요
사용해 보세요
사용해 보세요 ㅋㅋㅋ



		사용해 보세요
glyphicon glyphicon-hand-left	해 보세요
glyphicon glyphicon-hand-up	해 보세요
glyphicon 글리피콘 핸드다운	사용해 보세요
glyphicon glyphicon-원-화살표-오른쪽	사용해 보세요
glyphicon glyphicon-원-화살표-왼쪽	사용해 보세요
glyphicon glyphicon-circle-arrow-up	사용해 보세요
glyphicon-circle-arrow-down	사용해 보세요
glyphicon-globe	해 보세요
glyphicon glyphicon-wrench	사용해 보세요
glyphicon glyphicon-tasks	사용해 보세요
glyphicon glyphicon-filter	사용해 보세요
glyphicon glyphicon-briefcase	사용해 보세요
glyphicon-fullscreen	사용해 보세요
glyphicon- 대시보드	사용해보세요
glyphicon glyphicon-paperclip	사용해 보세요
glyphicon glyphicon-heart-empty	사용해 보세요
glyphicon glyphicon- link	해 보세요
glyphicon glyphicon-phone	사용해 보세요
	glyphicon glyphicon-pushpin	사용해 보세요
	glyphicon glyphicon-usd	사용해 보세요
	glyphicon con-g bp	해 보세요



ㅋㅋㅋ










	glyphicon glyphicon-저장	사용해 보세요

부트스트랩 드롭다운 메뉴 →