폰트 이미지가 웹 페이지에 표시되지 않습니다

초보자는 여기에 있습니다. 웹 사이트에 Fontastic을 사용하려고합니다. 여기에 내가 그것을 사용하고 방법은 다음과 같습니다 폰트 이미지가 웹 페이지에 표시되지 않습니다

<html> 
<head> 
    <link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"> 
</head> 
<body> 
    <h1> 
     <i class="icon-code">a</i> My Title 
    </h1> 
</body> 
</html>

어떻게 얻을 결과는 다음과 같이 나타납니다 적 : 작은 이미지를 표시하도록되어

에이미 제목

동안. 나는 모든 의견, 제안 및 코드 샘플을 주셔서 감사합니다.

출처

2014-12-07 Irfana

css 파일의 내용을보십시오. 참조되는 아이콘은 .icon-alignment-aligned-to 및 icon-briefcase입니다. icon-code 존재하지 않습니다.

icons.css

@charset "UTF-8"; 

/* untitled-font-1 */ 
@font-face { 
    font-family: "untitled-font-1"; 
    src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot"); 
    src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot?#iefix") format("embedded-opentype"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.woff") format("woff"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.ttf") format("truetype"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.svg#1417862732") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

[data-icon]:before { 
    font-family: "untitled-font-1" !important; 
    content: attr(data-icon); 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: "untitled-font-1" !important; 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-alignment-aligned-to:before { 
    content: "a"; 
} 
.icon-briefcase:before { 
    content: "b"; 
}

<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"/> 
 

 
<h1> 
 
     <i class="icon-briefcase"></i> My Title 
 
    </h1> 
 
<h1> 
 
     <i class="icon-alignment-aligned-to"></i> My Title 
 
    </h1>

출처

2014-12-07 13:26:56 Turnip

덕분에, 나는 CSS 파일에 (특정 이미지에 대한) 내 클래스를 추가하는 방법을 요청할 수 있습니다? CSS는 Fontastic 웹 사이트에서 생성되기 때문에. 고맙습니다. – Irfana

글꼴을 위해 선택한 글립 문자에 따라 CSS를 생성해야합니다. 대부분의 경우'code' 아이콘이 글꼴 파일에 없습니다. Fontastic – Turnip

에서 글꼴을 다시 만들어보십시오. 이제 해결되었습니다. 나는 CSS 파일을 재생성했으며 클래스가 포함되었습니다. 고마워요 :) – Irfana

폰트 이미지가 웹 페이지에 표시되지 않습니다

답변

관련 문제