development

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

big-blog 2020. 8. 17. 09:51
반응형

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>

        <h1>The greatest way to contact those you love</h1>
        <h3>In a way you don't imagine</h3>

        <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에서는 다시로드 버튼을 클릭하고 하드 캐시 재설정을 선택합니다.)

  • 사용 하는 <span>또는 <i>요소가 FontAwesome글꼴 패밀리 를 사용 하는지 확인하십시오 . 예를 들어,

    <i class="fa-pencil" title="Edit"></i>

    그러나

    <i class="fa fa-pencil" title="Edit"></i>

    CSS에 다음과 같은 내용이 있으면 작동하지 않습니다.

    * {
  font-family: 'Josefin Sans', sans-serif !important;   
}

  • IE8을 사용하는 경우 HTML5 Shim을 사용하고 있습니까?

  • 이것이 작동하지 않으면 Font Awesome Wiki에 추가 문제 해결 아이디어 가 있습니다.

처음에는 Font Awesome 5 와 함께 작동하지 못했습니다 .

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

That's why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.

w3schools helped me out in this case.

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.

The s in fas stands for solid, and some icons also have a regular mode, specified by using the prefix far.

I already noticed the different files in the FontAwesome css folder, like:

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

And that's when I realized my mistake. All I had to do was include the appropriate css to the html:

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

And then reference the correct item:

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

This setup works for me. Though not all items have equivalents in each type. This will not work:

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

As a side note, when you don't want to reference all seperate files then this will suffice:

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

Mine was not working because I wanted an icon which was not released in the FA version I was using.

This answers why some icons shows but others no.

Pretty obvious but I guess some people still fall for this. Like me.

You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS

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

To whoever may be checking this out in 2018. I am using font awesome 4.7.0 and I got this issue solved by simply taking out the s in fas as seen in the code <i class="fa fa-[icon-name]"></i>. This was originally <i class="fas fa-[icon-name]"></i>.

Hope this helps.

I solved this problem by putting the Fonts directory at the same level as my CSS files.

adding this worked for me:

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

take a look

so full example is:

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

If you are using blogger hosting, use this url stylesheet css:

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

Try the below two links keep in header tag.

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

Getting the Icons from the below link :

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

Just adding some more info to the above answers in regards with update on fontawesome,

If you use font awesome 5,

a. just copy-to-paste the below HTML,

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

Note: Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body> and just before (YOUR_CLOSING_BODY)

b. And for example,

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

If you define custom CSS you must set font-weight: 900; for some newer Font Awesome library (from version 5). Not setting this font-weight it may show squares.

the CDN link that you had posted i suppose is why it wasnt showing correctly, you can use this one below, it works perfectly for me.

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

I was able to get Font Awesome to work by using the all.min.css file.

Make sure you include the rel and type as in " rel="stylesheet" type='text/css'" in the link to the awesomefont css file. Without these the file wasn't loading correctly for me.

You can add this in .htaccess file in the directory of awesome font

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>

I use:

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

and style after:

.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);
}

I have tested and it's working.

Instead of this

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

Use it with HTTPS

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

Notes

This answer is created when the latest version of fontawesome is v5.* but yarn and npm version points to v4.* (21.06.2019). In other words, versions installed via package managers is behind latest release !

If you installed font-awesome via package manager (yarn or npm) then, please be aware which version was installed. Alternatively, if you've already installed font-awesome long time ago then, check what version was installed.

Installing font-awesome as new dependency:

$ 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.

Checking what version of font-awesome is already installed:

$ 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.

Problem

After you installed font-awesome dependency, you incorporate one of these two source files font-awesome.css or font-awesome.min.css (founded in node_modules/font-awesome/css/) into header of your webpage e.g. 

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

Next, you visit https://fontawesome.com/. You select free icons and you search for sign-in icon (as an example). You copy the icon e.g. <i class="fas fa-sign-in-alt"></i>, you paste it into your html and, icon is not shown, or is display as square or rectangle !

Solution

In essence, versions installed via package managers is behind version that is shown on https://fontawesome.com/ website. As you can see we installed font-awesome v4.7.0 but, website shows documentation for font-awesome v5.*. Solution, visit the website that documents icons for v4.7.0 https://fontawesome.com/v4.7.0, copy appropriate icon e.g. <i class="fa fa-sign-in" aria-hidden="true"></i> and incorporate it into your html.

For version 5:

If you downloaded the free package from this site:

https://fontawesome.com/download

The fonts are in the all.css and all.min.css file.

So your reference will look something like this:

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

The fontawesome.css file does not include the font reference.

You need a font importer.| try

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

I got mine to work by editing the main font-awesome.css file. It has urls to the src (woff, eot, etc...) I had to change them to the absolute path eg: http://mywebsite.com/font-awesome.woff Then it worked!

Change this:

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

To this:

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

I believe you need the http: otherwise it doesn't know what protocol to use (and uses the wrong one, file: for instance, as a result).

참고URL : https://stackoverflow.com/questions/24922833/fontawesome-icons-not-showing-why

반응형

'development' 카테고리의 다른 글

KnitR을 사용하여 R에서 프로그래밍 방식으로 마크 다운 테이블 생성  (0) 2020.08.17
JavaScript에서 문자열 프리미티브와 문자열 객체의 차이점은 무엇입니까?  (0) 2020.08.17
통합 Windows 인증을 사용하여 로그인 프롬프트 받기  (0) 2020.08.17
이 CrashlyticsMissingDependencyException을 어떻게 해결할 수 있습니까?  (0) 2020.08.17
Emacs 창의 크기는 어떻게 설정합니까?  (0) 2020.08.17

'development'의 다른글

  • 현재글FontAwesome 아이콘이 표시되지 않습니다.

관련글

댓글

티스토리툴바