맞춤 글꼴이 적용되지 않았습니다. CSS의 pseudoelement 전에

Question

CSS 콘텐츠 값에 문제가 있습니다. 사진과 같이 코드가 전혀 표시되지 않습니다. 아무도 원인을 설명 할 수 있습니까? 여기에 코드를 게시하지 않고 수정하려고 노력할 것입니다.

HTML :

<a href="#"><i class="icon-map-marker"></i> Atlanta</a> 

CSS :

.icon-map-marker:before{ 
    content: "\f041" 
} 

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('fontawesome-webfont.eot'); 
    src: url('fontawesome-webfont.eot') format('embedded-opentype'), 
     url('fontawesome-webfont.woff?') format('woff'), 
     url('fontawesome-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0 0; 
    background-repeat: repeat; 
    margin-top: 0 
} 

Answer 1

이것은을 표시하는 데 사용되는 글꼴에 정의되지 않은 문자에 의해 발생합니다. 대신 자리 표시자가 표시됩니다. Font Awesome에서 fa-map-marker character은 해당 위치에 있습니다.

분명히 font-family: FontAwesome은 의사 요소에 사용되지 않습니다. 설정되어 있지 않거나, 서체를 사용할 수 없거나, 브라우저 버그가 발생합니다. 다른 CSS 규칙이 사용되지 않는다고 가정합니다 (그렇지 않으면 계단식 어딘가에 대체가 발생할 수 있습니다).

font-family: FontAwesome?

:before은 "이전"요소의 하위 요소이므로 font-family을 올바르게 상속합니다. 부모는 font-family: FontAwesome입니다. 규칙이 유효하지 않은 경우는 예외입니다. 따라서 문제는 여기에 없으며 글꼴을 사용할 수없는 상태 여야합니다.

는

.icon-map-marker:before { 
    content: "\f041"; 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
} 

에 :before에 대한 규칙을 변경하려고 지금 문자 확인을 표시하는 경우를 참조 절대적으로해야합니다.

FontAwesome 글꼴 집합을 사용할 수 없습니까?

글꼴을 다운로드 할 수 없거나 손상되었거나 @font-face 규칙이 잘못되었습니다.

at-rule은 나에게 완벽하게 유효합니다. 왜 WOFF 경로 뒤에 물음표가 궁금해? 나는 이것이 이전의 IE (< 9) 해킹 이후에 남은 것이라고 생각하지만 아무런 해를 입지 않아야한다.

올바른 글꼴 파일을 다운로드 할 수 있는지 확인하는 것은 사용자의 책임입니다. 글꼴이 네트워크 트래픽을 감지하여로드되었는지 확인할 수 있습니다 (예 : Firebug 또는 LiveHTTPHeaders를 사용하십시오 (글꼴을 사용하고 건너 뛰기 캐쉬를 Ctrl + F5)으로 보내주십시오.

문제점은 브라우저 버그라고 생각합니다. 어떤 브라우저에서 어떤 브라우저를 사용하는지 명시하지 않았으므로 더 구체적으로 말할 수는 없습니다.

항상 확실하려면 CSS from the CDN을 사용할 수 있습니다. 또는 동일한 사이트의 지침에 따라 글꼴 멋지게 작동 시키십시오. bulletproof @font-face에 대해 자세히 알아볼 수도 있지만 지원하려는 브라우저에 현재 구현 상태 인 @font-face을 따라해야합니다.CDN에서

을 CSS를 사용하여 :before에 fa-map-marker의

빠른 테스트는 사용자의 위치 표시 줄에이 삽입 :

javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta' 

\\ 대신 자바 스크립트 문자열 내부 \의 필요합니다. 문자열은 유효한 HTML5 문서입니다.

사이드

U+F041이 range reserved for private use에서 문자 말한다. 결과적으로 different fonts은이 코드 포인트에 대해 다른 문자를 가질 수 있습니다.

어쩌면 2 대 1 대신 더 많은 클래스를 사용하는 것이 더 나을 것입니다. icon과 map-marker을 사용하면 선택자를 단순화하고 클래스가 더 의미 론적 일 수 있다고 말할 수 있습니다. CSS 전처리기를 사용하면 더 낮은 순전히 표현적인 단위의 더 의미 론적 인 클래스 city을 작성할 수 있습니다.

귀하의 HTML 마크 업이 끔찍합니다. 프레젠테이션 요구 사항을 충족 시키려면 너무 심하게 구부러져 있지만 HTML은 프레젠테이션에 독립적 인 구조를 표시해야합니다. <a href="#" class="icon-map-marker">Atlanta</a>을 사용하지 않는 이유는 무엇입니까?

Answer 2

이 브라우저의 캐시 문제 일 수 있습니다. 파일 이름 옆에 버전 번호를 추가하십시오.

@font-face { 
font-family: 'FontAwesome'; 
src: url('fontawesome-webfont.eot?v1'); 
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'), 
    url('fontawesome-webfont.woff?v1') format('woff'), 
    url('fontawesome-webfont.ttf?v1') format('truetype'); 
font-weight: normal; 
font-style: normal 

은}