2012-11-14 4 views
2

트위터 부트 스트랩으로 글꼴 썸네일을 사용하는 것에 대해 몇 가지 일반적인 질문이 있습니다.FontAwesome with twitter bootstrap 일반 질문

저는 웹 사이트에 설명 된 LESS 통합 방법을 사용했습니다.

  1. "아이코닉"글꼴이라고 생각했습니다. 그렇다면 왜 트위터 부트 스트랩 (Twitter Bootstrap)과 함께 제공되는 메인 텍스트 글꼴이 변경 되었습니까? 이 문제를 방지 할 수 있습니까?

  2. 특히 작은 크기의 트위터 부트 스트랩이 제공되는 Glyphicon png 버전에 비해 아이콘이 흐리게 보입니다. 왜?

  3. 표준 및 망막 디스플레이 모두에서 아이콘을 올바르게 표시하는 솔루션 (Twitter 부트 스트랩 사용)은 무엇입니까?

입력 해 주셔서 감사합니다.

편집 : 다음은 내가 갖고있는 문제의 예입니다. 당신이 볼 수 있듯이

Font Awesome issues

은 글꼴은 글꼴이 굉장 설치 한 후 다른 보인다. 버튼 모양과 느낌이 손실됩니다. 초록색과 빨간색 버튼 아이콘은 icon-large를 사용하여 렌더링되었지만 여전히 흐릿하게 보입니다. 이것에 더하여, 나는 그것이 어떻게 든 나의 디자인을 망쳤다는 것을 깨달았다.

답변

0

나는 내 사이트에서 awesome 멋진 글꼴을 사용해 왔으며 그것을 좋아했습니다. 나는 그 글꼴이 페이지의 글꼴로 엉망이되는 것을 보지 않습니다. 그래서 이드는 당신이 원하는 것을 보여줘야합니다. 이야기 중 .. 아이콘 중 일부는 실제로 작아지면 흐릿 해집니다. 아이콘 위의 클래스를 사용하여 커지면 더 큰 아이콘을 만들 수 있습니다. 이것은 글꼴 때문에 멋진 사람이 그들에게 만든 규모 내가 그들을 사용했을 때 나는 그 자신의 요소에 모든 아이콘을 넣었습니다 - <em class="icon-thumbs-up></em> 그리고 나서 또는 그 전에 텍스트를 가하고 .. 그리고 내가 아는 한, 아이콘은 오페라 미니를 제외한 모든 브라우저 및 데스크톱에서 작동합니다. 미니 폰은 글꼴면 속성을 지원하지 않기 때문에

나는 아직 시도하지 않았지만 아이콘으로 http://icomoon.io/app/을보고 있습니다. 나는 하루에 폰트를 바꾸려고 계획하고 있습니다.하지만 그 테이블에 많은 것을 가지고 있기 때문에 잠시 시간이 걸릴 것입니다.

+0

나는 내가 이야기하고있는 문제를 설명하기 위해 내 글을 편집했다. icomoon 물건을 가져 주셔서 감사합니다. 나는 이것을 조사 할 것이다. Twitter Bootstrap과 통합하는 방법에 대한 아이디어가 있습니까? 건배. – MrUpsidown

+0

나는 당신이 모호함으로 무엇을 의미 하는지를보고, 당신이 거기에 부트 스트랩 아이콘을 가지고 있지 않다면, 내가 아는 그 주변을 전혀 알 수 없다. '[class * = "icon-] {background : none;}을 추가하면 도움이 될 것입니다. 부트 스트랩이 사용하는 글리프콘이 아니라 다른 아이콘이 함께 사용된다는 사실을 명심해야합니다. 다시 다른 다음 icomoon 애플 리케이션을 사용하면 일단 당신이 아이콘을 사용하여 CSS를 샘플과 함께 CSS 파일을 얻을 것이다 그것을 사용하고 싶은 아이콘을 선택합니다 .. 그럼 그냥 그것을 사용하여 당신이 글꼴을 사용하는 것과 같은 방식으로 – Yohn

+0

그 icomoon 애플 리케이션 http://icomoon.io/app 정말 멋지 네요!그것은 당신이 필요로하는 아이콘만을 선택하거나, 자신의 예술을 가져 오거나, png 또는 글꼴로 다운로드 할 수있게합니다. 또한 자신의 앱에 통합하는 데 필요한 모든 CSS를 제공합니다. 팁 고마워! – MrUpsidown

0

Font-Awesome은 (는) [class^="icon-"]을 포함하는 선택자를 많이 사용합니다. 어떤 이유로 다른 곳에서 icon-으로 시작하는 클래스를 사용하면 이로 인해 문제가 발생할 수 있습니다. 부트 스트랩은 동일하지만 아마 아이콘의 여백과 글꼴 크기를 설정하지 않습니다.

+0

"icon-"로 시작하는 사용자 정의 클래스는 사용하지 않습니다. – MrUpsidown

+0

@MrUpsidown 네, 그건 그냥 추측이었습니다. 어쩌면 Firebug (또는 유사한 내장 브라우저 도구)에서 사용되는 CSS 규칙을보고 차이점의 출처를 확인해야합니다. 또한 LESS가 올바르게 컴파일되었는지 확인하십시오. 여러 구현에서 일부 가져 오기가 망가질 수 있습니다. – Kapep

+0

디버깅에 관한 조언을 따를 것입니다. 고맙습니다. – MrUpsidown