123

최근에 나는이 웹 사이트를 개발하고 있고 거기에 글꼴 멋진 아이콘을 넣으려고 노력하고 있습니다. 그래서 그것은 확장 가능합니다.

문제는 그들이 나타나지 않는다는 것입니다.

HTML을보십시오 :

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

또는

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

머리에 스타일 시트 참조를 넣었습니다.

나는 그들이 왜 나타나지 않는지 모르겠습니다.

다음은 참조입니다.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

좋습니다. 다음은 전체 html입니다.

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

html css font-awesome

— 루이스 발데즈
소스

1

나에게 벌금을 작동 : jsfiddle.net/ZF7x4

— 샤 하르

related stackoverflow.com/questions/14366158/…

— Ciro Santilli 郝海东冠状病六四事件

1

다른 버전의 멋진 글꼴을 사용해보세요. 예를 들어, 버전 4.3.0에서는 일부 아이콘이 표시되지 않았지만 4.7.0에서는 표시되었습니다.

— Almir Campos

stackoverflow.com/a/55977898/4874281을 확인하십시오 . 누군가에게 도움이

— 되기를 바랍니다

105

참고로 다음이 있습니다.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

구체적으로 href=부품.

그러나 전체 HTML 아래에는 다음이 있습니다.

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

당신은 대체하는 시도 src=로 href=이되기 위해 전체 HTML에?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

나를 위해 작동합니다 : http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
소스

10

참고 : 때로는 빈 상자가 표시 될 수 있으며 동일한 폴더에 CSS 및 글꼴 파일 이 있는지 다시 확인하십시오 .

— shaijut

104

멋진 글꼴 아이콘을 찾는 사람들을 위해 몇 가지 아이디어를 수집했습니다.

다음과 같이 CDN에 대한 올바른 링크를 사용하는지 확인하십시오.

<link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

페이지가 HTTPS를 사용하는 경우, 당신은 (대신 HTTPS를 사용하여 글꼴 멋진 CSS에 링크 할 http://로 https://위의 링크에서).
AdBlock Plus 또는 uBlock이 활성화되어 있지 않은지 다시 확인하십시오. 일부 아이콘을 차단하고있을 수 있습니다.
브라우저 캐시를 재설정하십시오. (Chrome에서는 다시로드 버튼을 클릭하고 하드 캐시 재설정을 선택합니다.)
사용 하는 또는 요소가 FontAwesome글꼴 패밀리 를 사용 하는지 확인하십시오 . 예를 들어,
```

```
그러나
```

```
CSS에 다음과 같은 내용이 있으면 작동하지 않습니다.
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
IE8을 사용하는 경우 HTML5 Shim을 사용하고 있습니까?
이것이 작동하지 않으면 Font Awesome Wiki에 추가 문제 해결 아이디어 가 있습니다.

— MXRO
소스

3

나는 추가합니다 : 당신의 .htaccess가 TTF, SVG, EOT, 또는 WOFF 확장을 차단하지 확인

— BassMHL

글꼴 재정의! 이에 대해 언급하는 답변은 많지 않습니다. 나는 확인하고 확인하고 확인하고 마침내 알아 냈습니다. 나는 과거에도이 문제를 겪었고 그 이유를 몰랐지만 지금은 알고있다.

— adrianmc

1

fa먼저 클래스 이름으로 싱글을 추가하지 못했습니다 . 감사. 단계별로 문제를 찾기위한 완벽한 대답입니다.

— 카이 NOACK

나에게는 뭔가 다른 글꼴 가족을 설정했다

— levininja

저에게는 "font-weight : 500"이있었습니다 (제가 사용하던 테마와 일치하도록 만들기 위해). 나는 그것을 "font-weight : bold"로 설정해야했다

— bowlerae

24

처음에는 Font Awesome 5 에서이 작업을 수행 할 수 없었습니다 .

<i class="fa fa-sort-down"></i>

그래서 제가 여기 온 이유는 굉장한 폰트에 익숙하지 않은 것입니다. 그래서 더 자세히 살펴 보았을 때 내 문제는 버전의 문제 일 뿐이라는 것을 알았습니다.

이 경우 w3schools 가 저를 도왔습니다.

Font Awesome 5의 새로운 기능은 fas접두사이고 Font Awesome 4는 fa.

s in fas은 solid 를 나타내며 일부 아이콘 에는 접두사를 사용하여 지정된 일반 모드 도 있습니다 far.

이미 FontAwesome css 폴더에서 다음과 같은 다른 파일을 발견했습니다.

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.css

그리고 그때 제가 실수를 깨달았습니다. 내가해야 할 일은 html에 적절한 CSS를 포함하는 것뿐입니다.

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

그런 다음 올바른 항목을 참조하십시오.

<i class="fas fa-sort-down"></i>

이 설정은 저에게 효과적입니다. 모든 항목이 각 유형에 해당하는 것은 아니지만. 작동하지 않습니다.

<i class="far fa-sort-down"></i>

참고로, 모든 개별 파일을 참조하지 않으려면 다음으로 충분합니다.

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

— Ruard van Elburg
소스

또한 치트 시트 에는 각 아이콘 유형에 사용할 수있는 항목이 표시됩니다.

— Ruard 반 ELBURG

12

사용하던 FA 버전에서 출시되지 않은 아이콘을 원했기 때문에 Mine이 작동하지 않았습니다.

이것은 일부 아이콘이 표시되지만 다른 아이콘은 표시되지 않는 이유에 대한 답변입니다.

꽤 분명하지만 일부 사람들은 여전히 이것에 빠져 있습니다. 나처럼.

— 타이 구 아라 안드라데
소스

4

예, 질문에 대한 답변을 제공합니다.

— Bobort

2

또는 사용중인 버전에 더 이상 존재하지 않는 이전 글꼴을 사용하려고합니다. 예를 들어, 이것은 단지 times-circle-o가 아니라 times-circle이라고 불립니다. 이것은 이전 이름입니다 : fontawesome.com/v4.7.0/icon/times-circle-o

— smoore4

1

감사합니다!! 이로 인해 하루 종일 머리를 당기게되었습니다

— 24x7

5

maxcdn.bootstrapcdn.com에는 https를 사용해야합니다. maxcdn의 https 만 CORS를 지원합니다.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />

— Chatchawan Wongsiriprasert
소스

4

내 CSS 파일과 같은 수준에 Fonts 디렉토리를 배치하여이 문제를 해결했습니다.

— Lolo
소스

3

2018이 아웃을 체크 할 수있다 누구에게 나는 글꼴 최고 4.7.0를 사용하고 있는데이 문제는 단순히 복용에 의해 해결 가지고 s에 fas코드에서 볼 수 있듯이 . 이것은 원래 .

도움이 되었기를 바랍니다.

— 굿럭 레오
소스

또한 node.js 서버를 실행하고 있습니다.

— Goodluck Leo

Font Awesome 5의 새로운 기능은 fas 접두사이고 Font Awesome 4는 fa를 사용합니다. 에서 W3 스쿨

— Ruard 반 ELBURG

2

fontawesome에 대한 업데이트와 관련하여 위의 답변에 더 많은 정보를 추가하면

font awesome 5를 사용하면

ㅏ. 아래 HTML을 복사하여 붙여 넣으세요.

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

참고 : 내부 <body> {YOUR_SCRIPT_HERE}</body>및 바로 앞에 모든 스크립트를 포함하는 것이 좋습니다 (YOUR_CLOSING_BODY).

비. 예를 들어

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

— Sundar Gsv
소스

fa 웹 사이트에 연결하는 대신 로컬에서 CSS를 제공하는 것은 어떻습니까?

— Ghilteras

이것은 내 경우였습니다 ... js 파일이 없었습니다. 이제 작동합니다!

— Cristian Sepulveda

2

이것을 추가하면 나를 위해 일했습니다.

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

구경하다

전체 예는 다음과 같습니다.

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

스 니펫 확장

— Edgarmtze
소스

2

사용자 정의 CSS를 정의하는 경우 font-weight: 900;새로운 Font Awesome 라이브러리 (버전 5부터)에 대해 설정해야합니다 . 이 글꼴 두께를 설정하지 않으면 사각형이 표시 될 수 있습니다.

— Jurev
소스

2

노트

이 답변은 fontawesome 의 최신 버전 이 v5. * 이지만 yarn 및 npm 버전이 v4. * (21.06.2019) 를 가리킬 때 생성됩니다 . 다시 말해, 패키지 관리자를 통해 설치된 버전이 최신 릴리스보다 뒤떨어져 있습니다!

font-awesome패키지 관리자 ( yarn 또는 npm )를 통해 설치 한 경우 어떤 버전이 설치되었는지 확인하십시오. 또는 이미 font-awesome오래 전에 설치했다면 어떤 버전이 설치되었는지 확인하십시오.

새로운 종속성으로 멋진 글꼴 설치 :

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

이미 설치된 font-awesome 버전 확인 :

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

문제

font-awesome의존성 을 설치 한 후 ,이 두 소스 파일 중 하나 font-awesome.css또는 font-awesome.min.css(에서 발견됨 node_modules/font-awesome/css/)를 웹 페이지의 헤더 에 통합합니다.

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

다음으로 https://fontawesome.com/ 을 방문 합니다. 무료 아이콘을 선택하고 로그인 아이콘을 검색 합니다 (예 :). 예를 들어 아이콘을 복사 하여 html에 붙여 넣으면 아이콘이 표시되지 않거나 정사각형 또는 직사각형으로 표시됩니다!

해결책

본질적으로 패키지 관리자를 통해 설치된 버전은 https://fontawesome.com/ 웹 사이트에 표시된 버전보다 뒤떨어져 있습니다. 보시다시피 우리가 설치 font-awesome v4.7.0했지만 웹 사이트에는 font-awesome v5.*. 해결책, v4.7.0 https://fontawesome.com/v4.7.0 에 대한 아이콘을 문서화하는 웹 사이트를 방문하여 적절한 아이콘을 복사 하고이를 html에 통합하십시오.

— Lukasz Dynowski
소스

그들은 여기 에 최신 버전 의 새 패키지를 출시했습니다 . 그것은과도 호환 점점 말대꾸 \ O /

— DerpyNerd

2

버전 5의 경우 :

이 사이트에서 무료 패키지를 다운로드 한 경우 :

https://fontawesome.com/download

글꼴은 all.css 및 all.min.css 파일에 있습니다.

따라서 참조는 다음과 같습니다.

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

fontawesome.css 파일에는 글꼴 참조가 포함되어 있지 않습니다.

— 라이브 사랑
소스

1

블로거 호스팅을 사용하는 경우 다음 URL 스타일 시트 css를 사용하십시오.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

— Nurdin BM.
소스

1

헤더 태그에 유지되는 아래 두 개의 링크를 시도하십시오.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

아래 링크에서 아이콘 가져 오기 :

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

— 체리
소스

1

나는 사용한다:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

이후 스타일 :

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

— Tran Anh Hien
소스

1

당신이 게시 한 CDN 링크가 올바르게 표시되지 않는 이유라고 생각합니다. 아래에서 이것을 사용할 수 있으며 완벽하게 작동합니다.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

스 니펫 확장

— 존 케쉬 마 후구
소스

1

all.min.css 파일을 사용하여 Font Awesome을 작동시킬 수있었습니다.

— 롭 브라이 데커
소스

0

rel = "stylesheet"type = 'text / css' "와 같이 rel을 포함하고 awesomefont css 파일 링크에 입력하세요. 이것 없이는 파일이 제대로로드되지 않았습니다.

— 엘리엇 로버트
소스

0

멋진 글꼴의 디렉토리에있는 .htaccess 파일에 이것을 추가 할 수 있습니다.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

— 웨 일드 하킴
소스

0

나는 테스트했고 작동하고 있습니다.

이 대신

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

HTTPS와 함께 사용

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

— 아티 프 타리크
소스

-1

글꼴 가져 오기가 필요합니다. | 시험

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

— SIAMWEBSITE
소스

-2

기본 font-awesome.css 파일을 편집하여 작업하도록했습니다. 그것은 src (woff, eot, etc ...)에 대한 URL을 가지고 있습니다. 나는 그것들을 절대 경로로 변경해야 했습니다. 예 : http://mywebsite.com/font-awesome.woff 그런 다음 작동했습니다!

— crystallove18
소스

2

외부 파일을 편집하고 있으므로 권장하지 않습니다. 귀하 (또는 귀하의 팀)는 fontawesome을 업데이트해야 할 때마다 이것을 기억해야합니다.

— J Cordero

-6

이것을 변경하십시오 :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

이에:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

난 당신이 필요 믿고 http:, 그렇지 않으면 사용에 어떤 프로토콜을 알고 (그리고, 잘못된를 사용하지 않는 file:결과로, 예를 들어).

— 샤 하르
소스

@ user3870894 사실 그것은 href자바 스크립트를 생각하고있었습니다. 그러나 새 코드를 사용해보십시오.

— Shahar

@ user3870894 o_o 전체 HTML 또는 적어도 주요 부분을 게시하십시오. 콘솔은 무엇을 말합니까? 요소를 검사 해 보셨습니까?

— Shahar

2

@Shahar //브라우저 를 사용 하여 요청 사이트가 사용중인 프로토콜을 선택합니다. 사이트에서 https를 사용하는 경우 https를 선택합니다. http를 사용하는 경우 http를 사용하여 CDN에서 파일을 요청합니다. 물론 file:///권장되지 않는를 사용하여 로컬에서 사이트를 열면 브라우저는 실제로 file프로토콜로 cdn을 열려고 시도 합니다.

— Robin van Baalen 2015 년

FontAwesome 아이콘이 표시되지 않습니다. 왜?

노트

문제

해결책