부트 스트랩 글꼴 아이콘 (Glyphicons)

이 장에서는 글꼴 아이콘 (Glyphicons)를 설명하며, 몇 가지 예는 사용을 이해하는. 부트 스트랩 글꼴 형식은 200 개 이상의 상형 문자와 함께 번들로. 첫째, 우리가 먼저 글꼴 아이콘이 무엇인지 이해하자.

글꼴 아이콘은 무엇입니까?

글꼴 아이콘은 웹 프로젝트에서 사용되는 아이콘 글꼴입니다. 하지만, Glyphicons의 종족을은 상용 라이선스가 필요합니다,하지만 당신은 무료로 사용이 아이콘에 부트 스트랩 프로젝트를 기반으로 할 수 있습니다.

감사 아이콘 저자을 표현하기 위해, 당신이 사용하는 동안 링크 GLYPHICONS 사이트를 추가 바랍니다.

글꼴 아이콘 가져 오기

우리는이 환경 설치 장는 부트 스트랩 3.X 버전을 다운로드하고 그 디렉토리 구조를 이해합니다.글꼴폴더에 아이콘은 다음 이러한 파일이 포함 된 글꼴을 찾을 수 있습니다 :

• glyphicons - 종족을-regular.eot
• glyphicons - 종족을-regular.svg
• glyphicons - 종족을-regular.ttf
• glyphicons - 종족을-regular.woff

파일내에서의 dist폴더 CSS를 폴더bootstrap.css및부트 스트랩 - min.css작성 관련 CSS 규칙.

글꼴 아이콘 목록

사용 가능한 글꼴 아이콘의 목록을 보려면 여기를 클릭하십시오.

규칙의 CSS 해석

다음 CSS 규칙은 클래스를 glyphicon 구성한다.

@ 글꼴 얼굴 {
  글꼴 - 가족 : 'Glyphicons 두요 반인 족';
  SRC : 홈페이지 ( '../ 글꼴 / glyphicons-종족을-regular.eot');
  SRC : 홈페이지 ( '../ 글꼴 / glyphicons-종족을-regular.eot #iefix?') 형식 ( '임베디드 오픈 타입'), URL ( '../ 글꼴 / glyphicons-종족을-regular.woff') 형식 ( 'WOFF'), URL ( '../ 글꼴 / glyphicons-종족을-regular.ttf') 형식 ( '트루'), URL ( '../ 글꼴 / glyphicons-종족을-regular.svg #의 glyphicons_halflingsregular') 형식 ( 'SVG');
}

.glyphicon {
  위치 : 상대;
  상단 : 1 픽셀;
  디스플레이 : 인라인 블록;
  글꼴 - 가족 : 'Glyphicons 두요 반인 족';
  -webkit-글꼴 다듬기 : 안티 앨리어싱;
  글꼴 스타일 : 일반;
  글꼴 - 무게 : 정상;
  라인 - 높이 : 1;
  -moz-OSX-글꼴 다듬기 : 그레이 스케일;
}

그래서 글꼴 얼굴 규칙은 사실 glyphicons 선언 글꼴 - 가족과 위치를 찾을 수있는 곳입니다.

.glyphicon 클래스는 인라인 블록, 문 글꼴, 글꼴 스타일 조항 및 글꼴 무게로 렌더링 1 픽셀의 상단에서 오프셋 상대적 위치를 선언 정상, 1 행의 높이를 설정합니다. 또한, -webkit-글꼴 다듬기의 사용 : 안티 앨리어싱과 -moz-OSX-글꼴 다듬기 : 그레이 스케일은, 브라우저 간 일관성을 얻을.

그럼, 여기서

.glyphicon : 빈 {
  폭 : 1em;
}

빈 glyphicon.

200 클래스, 아이콘에 대한 각각의 클래스가 있습니다. 다음과 같이이 일반적인 형식의 클래스입니다 :

.glyphicon - 키워드 : 전에 {
  내용 : "hexvalue";
}

예를 들어, 다음과 같이 사용자가 아이콘을 사용하여, 그 클래스이다 :

.glyphicon 사용자 : 전에 {
  내용 : "\의 E008";
}

용법

아이콘을 사용하려면 다음 코드를 사용합니다. 아이콘과 텍스트 사이의 적절한 공간을 보관하십시오.

<스팬 클래스 = "glyphicon glyphicon 검색"> </ SPAN>

다음은 글꼴 아이콘을 사용하는 방법을 보여줍니다

결과는 다음과 같다 :

탐색 모음과 글꼴 아이콘

사용자 정의 글꼴 아이콘

우리는 글꼴 아이콘을 사용하는 방법을 보았다, 우리는 글꼴 아이콘을 사용자 정의하는 방법을 참조하십시오.

우리는 글꼴 크기, 색상을 변경하여, 위의 예를 시작하고 사용자 정의 아이콘으로 텍스트에 그림자를 적용합니다.

여기에 코드가 시작이다 :

<버튼 유형 = "버튼"클래스 = "btn을 BTN-차 BTN-LG">
  <스팬 클래스 = "glyphicon의 glyphicon 사용자"> </ SPAN> 사용자
</ 버튼>

다음과 같은 효과가 있습니다 :

사용자 정의 글꼴 크기

증가 또는 아이콘의 글꼴 크기를 감소하면 아이콘이 크게 또는 작게 표시 할 수 있습니다.

<버튼 유형 = "버튼"클래스 = "btn을 BTN-차 BTN-LG"스타일 = "글꼴 - 크기 : 60 픽셀">
  <스팬 클래스 = "glyphicon의 glyphicon 사용자"> </ SPAN> 사용자
</ 버튼>

사용자 정의 글꼴 색

<버튼 유형 = "버튼"클래스 = "btn을 BTN-차 BTN-LG"스타일 = "색상 : RGB (212, 106, 64);">
  <스팬 클래스 = "glyphicon의 glyphicon 사용자"> </ SPAN> 사용자
</ 버튼>

텍스트 그림자 적용

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

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

글꼴 아이콘을 사용자 정의하려면 여기를 클릭 >>

아이콘 목록