Twitter Bootstrap의 Font Awesome vs Glyphicons


81

저는 웹 개발 초보자이고 최근에 Twitter Bootstrap으로 작업하기 시작했습니다 . 이미 사용 방법을 알고있는 Glyphicon 을 사용 하고 있다는 것을 알고 있습니다. 그러나 나는 또한 Bootstrap을 위해 만들어 졌다고 말하는 Font Awesome 을 발견했습니다.

둘의 차이점은 무엇입니까? 하나는 다른 하나의 대안입니까? 아니면 다른 장소에서 사용해야합니까?

답변:


66

Bootstrap 2.xx에서 Glyphyicons 이미지 형식이므로 크기를 늘리거나 색상, 배경색 등을 쉽게 변경할 수 없습니다. 그러나 font-awesome은 크기, 색상, 드롭 섀도우 및 CSS의 힘으로 수행 할 수있는 모든 작업을 즉시 사용자 정의 할 수있는 확장 가능한 벡터 아이콘을 제공합니다.

Font-awesome은 새로운 아이콘으로 수시로 업데이트되는 Glyphyicons의 대안입니다. Fat과 Mdo는 Glyphyicons를 대체하기 위해 부트 스트랩 버전 3에 Font-awesome을 통합 할 계획입니다.

내 제안은 글꼴이 멋진 부트 스트랩을 사용하는 것입니다. 먼저 부트 스트랩 CSS와 Font-awesome CSS를 포함하여 Glyphyicon이 font-awesome에 의해 재정의되도록합니다.

최신 정보

에서 부트 스트랩 버전 3.xx의 glyphicons도 12 픽셀 글꼴 크기에 잘 렌더링 글꼴 형식이된다. 최신 버전의 fontawesome, 즉 4.01을 사용하는 경우 fontawesome과 함께 두 glyphicon을 모두 사용할 수 있습니다.


19
+1, 그러나 Font Awesome과의 통합은 Bootstrap 3에서 구현되지 않았습니다. FA는 Bootstrap 2를 즉시 지원하는 것 외에 공식적으로 twitter와 제휴하지 않습니다. 다음은 부트 스트랩을 지원하는 다양한 글꼴 아이콘 팩비교입니다 .
jrhorn424

2
업데이트 : Bootstrap 4는 더 이상 Glyphicons를 제공하지 않습니다.
MushyPeas

FontAwesome은 상업적 용도로도 100 % 무료라고 말합니다. Glyphicon에는 몇 가지 제한 사항이 있습니다. "Glyphicons Halflings는 일반적으로 무료로 사용할 수 없습니다." "구글 머티리얼 글꼴"에 대해서는 잘 모르겠지만 일부 제품 (js 차트 모듈)의 경우 직접 호스팅 할 수 없으며 CDN에서만 연결할 수 있습니다.
Andrei

굉장한 글꼴과 함께 제공되는 벡터 아이콘을 사용하면 어떤 이점이 있습니까? 글 리피 콘에 사용되는 이미지 유형은 무엇입니까?
Monojit Sarkar

@Ravimallya 당신은 글리프 아이콘 크기와 색상을 변경할 수 없다고 말했습니다. 나는 당신이 이것을 말한 맥락을 모릅니다. 크기와 색상이 변경 될 수 있음을 발견했습니다. 여기에 예가 있습니다 .-----> 글리프 아이콘 색상 변경-> 몇 가지 샘플 <span class = "glyphicon glyphicon-user"style = "color : blue"> </ span> 크기도 늘릴 수 있습니다. 여기에 적어주세요 stackoverflow.com/a/24960243/6188148
Monojit Sarkar

28

Font Awesome :-150 개 이상의 아이콘-기본 부트 스트랩 글꼴 (14px)에서 완벽한 픽셀-아이콘은 크기가 같지 않으며 맞춤 CSS가 필요합니다.-글 머리 기호 목록, 회전 (css3로 추가 가능), 스택 아이콘 있음 및 스피너 애니메이션 (수동으로 추가 할 수 있음) Glyphyicons :-아이콘 축소-더 큰 글꼴 크기 (16px)에서 완벽한 픽셀-동일한 크기 아이콘

참조 : http://tagliala.github.io/vectoriconsroundup/

Bootstrap 용으로 제작 된 인기있는 아이콘 글꼴을 나란히 비교합니다.


12

Font awesome은 특정 글꼴과 CSS를 사용하여 "마법"을 만드는 벡터 아이콘 모음입니다. Glyphicons는 sprite-css 기술을 사용합니다.
둘 다 사용할 수 있습니다. Bootstrap의 파일 뒤에 css 파일을 추가하면됩니다.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

글 리피 콘이 아니라 폰트에 대한 굉장한 것을 원하지 않는다면 여기 로 가서 부트 스트랩 다운로드를 커스터마이징하여 글 리피 콘없이 얻을 수 있습니다.


13
부트 스트랩과 함께 제공되는 Glyphicon은 이제 font 메서드도 사용합니다! getbootstrap.com/components/#glyphicons
네오

어떻게 ? 귀하의 링크는 벡터 방식으로 글 리피 콘 사용에 대한 정보를 제공합니까?
trante

4
Twitter Bootstrap 용 새 글 리피 콘은 이미 벡터 형식입니다.
tommaso capelli
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.