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

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

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

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>

답변

참고로 다음이 있습니다.

<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

답변

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

다음과 같이 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에 추가 문제 해결 아이디어 가 있습니다.

답변

처음에는 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">

답변

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

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

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

답변

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" />

답변

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

답변

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

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