FontAwesome-pictogrammen worden niet weergegeven, waarom?

Onlangs heb ik een website ontwikkeld en ik probeer een aantal geweldige lettertypen te gebruiken.

Het probleem is dat ze niet komen opdagen.

Hier is de HTML:

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

of

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

Ik heb de stylesheetreferentie in de head gezet.

Ik weet niet waarom ze niet verschijnen.

Hier is de referentie:

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

Hier is de volledige html:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="https://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/[email protected]" 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>

Antwoord 1, Autoriteit 100%

Onder uw referentie heeft u dit:

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

Specifiek, de href=PART.

Onder uw volledige HTML is dit echter:

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

Hebt u geprobeerd u te vervangen src=met href=in uw volledige HTML om dit te worden?

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

Werkt voor mij: http://codepen.io/TheNathanG/pen/xbyFg


Antwoord 2, autoriteit 93%

Voor zoekers naar ontbrekende lettertype-geweldige iconen, heb ik een paar ideeën verzameld:

  • Zorg ervoor dat u een correcte link naar het CDN gebruikt, zoals:

    <link 
      href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
      rel="stylesheet"  type='text/css'>
    
  • Als je pagina HTTPS gebruikt, link je dan naar de font-awesome CSS met HTTPS (vervang http://door https://in de link hierboven).

  • Controleer nogmaals of u AdBlock Plus of uBlock niet heeft ingeschakeld. Mogelijk blokkeren ze sommige pictogrammen.

  • Reset de cache van je browser. (Klik in Chrome lang op de herlaadknop en selecteer Hard Cache Reset)

  • Zorg ervoor dat het <span>– of <i>-element dat u gebruikt, de lettertypefamilie FontAwesomegebruikt. Het mag bijvoorbeeld niet alleen

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

    maar

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

    Het zal niet werken als je iets als het volgende in je CSS hebt:

    * {
      font-family: 'Josefin Sans', sans-serif !important;   
    }
    
  • Als je IE8 gebruikt, gebruik je dan een HTML5 Shim?

  • Als dit niet werkt, zijn er nog meer Ideeën voor het oplossen van problemenop de Font Awesome Wiki.


Antwoord 3, autoriteit 30%

In het begin kreeg ik dit niet werkend met Font Awesome 5:

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

Daarom kwam ik hier, omdat ik niet bekend was met het geweldige lettertype. Dus toen ik verder keek, merkte ik dat mijn probleem alleen een probleem was met de versie.

w3schoolsheeft me in dit geval geholpen.

Nieuw in Font Awesome 5 is het voorvoegsel fas, Font Awesome 4 gebruikt fa.

De s in fasstaat voor solid, en sommige pictogrammen hebben ook een
normalemodus, gespecificeerd met het voorvoegsel far.

Ik heb de verschillende bestanden in de FontAwesome css-map al opgemerkt, zoals:

  • alle.min.css
  • brands.min.css
  • fontawesome.min.css
  • regulier.min.css
  • solid.min.css

En toen realiseerde ik me mijn fout. Het enige wat ik hoefde te doen was de juiste css aan de html toevoegen:

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

En verwijs dan naar het juiste item:

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

Deze opstelling werkt voor mij. Hoewel niet alle items equivalenten hebben in elk type. Dit werkt niet:

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

Als een kanttekening, als u niet naar alle afzonderlijke bestanden wilt verwijzen, is dit voldoende:

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

Antwoord 4, autoriteit 10%

De mijne werkte niet omdat ik een pictogram wilde dat niet was uitgebracht in de FA-versie die ik gebruikte.

Dit beantwoordt waarom sommige pictogrammen worden weergegeven, maar andere niet.

Vrij voor de hand liggend, maar ik denk dat sommige mensen hier nog steeds voor vallen. Vind mij leuk.


Antwoord 5, autoriteit 7%

Gewoon wat meer informatie toevoegen aan de bovenstaande antwoorden met betrekking tot update over fontawesome,

Als je font awesome 5 gebruikt,

a. kopieer en plak de onderstaande HTML,

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

Opmerking:Het is beter om al uw scripts op te nemen in de <body> {YOUR_SCRIPT_HERE}</body>en net voor (YOUR_CLOSING_BODY)

b. En bijvoorbeeld

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

Antwoord 6, autoriteit 5%

U moet https gebruiken voor maxcdn.bootstrapcdn.com. Alleen https op maxcdn support CORS

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

Antwoord 7, Autoriteit 5%

Ik heb het zelfde probleem, Shows pictogrammen in vierkante, probeerde volgens de instructies die hier: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

opgelost door deze verwijzing in het kopgedeelte van de HTML-pagina

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Antwoord 8, Autoriteit 4%

ik dit probleem opgelost door de invoering van de Fonts map op hetzelfde niveau als mijn CSS-bestanden.


Antwoord 9, Autoriteit 3%

Om zo wie het controleren dit uit in 2018. Ik gebruik lettertype geweldig 4.7.0 en ik heb dit probleem opgelost door simpelweg het uitnemen van de sin fasals gezien in de code <i class="fa fa-[icon-name]"></i>. Dit was oorspronkelijk <i class="fas fa-[icon-name]"></i>.

Ik hoop dat dit helpt.


Antwoord 10, Autoriteit 3%

Toelichting

Dit antwoord wordt gemaakt wanneer de nieuwste versie van fontawesomev5.*is maar garenen npm-versie verwijst naar v4.*(21.06.2019). Met andere woorden, versies die zijn geïnstalleerd via pakketbeheerders lopen achter op de nieuwste release!

Als je font-awesomehebt geïnstalleerd via pakketbeheerder (yarnof npm), let er dan op welke versie is geïnstalleerd. Als alternatief, als je font-awesomeal lang geleden hebt geïnstalleerd, controleer dan welke versie is geïnstalleerd.

Font-awesome installeren als nieuwe afhankelijkheid:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 3.32s.

Controleren welke versie van font-awesome al is geïnstalleerd:

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

Probleem

Nadat je de afhankelijkheid van font-awesomehebt geïnstalleerd, neem je een van deze twee bronbestanden font-awesome.cssof font-awesome.min.css(opgericht in node_modules/font-awesome/css/) in de headervan uw webpagina, bijv.

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

Vervolgens ga je naar https://fontawesome.com/. U selecteert gratis pictogrammen en zoekt naar het aanmeldpictogram(als voorbeeld). U kopieert het pictogram b.v. <i class="fas fa-sign-in-alt"></i>, je plakt het in je html en het pictogram wordt niet weergegeven of wordt weergegeven als vierkant of rechthoek !

Oplossing

In wezen zitten versies die zijn geïnstalleerd via pakketbeheerders achter de versie die wordt weergegeven op https://fontawesome.com/website. Zoals je kunt zien hebben we font-awesome v4.7.0geïnstalleerd, maar de website toont documentatie voor font-awesome v5.*. Oplossing: bezoek de website met pictogrammen voor v4.7.0https://fontawesome.com /v4.7.0, kopieer het juiste pictogram bijv <i class="fa fa-sign-in" aria-hidden="true"></i>en neem het op in uw html.


Antwoord 11, autoriteit 2%

Voor versie 5:

Als je het gratis pakket van deze site hebt gedownload:

https://fontawesome.com/download

De lettertypen bevinden zich in het bestand all.cssen all.min.css.

Dus uw referentie ziet er ongeveer zo uit:

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

Het bestand fontawesome.css bevat geen lettertypeverwijzing.


Antwoord 12, autoriteit 2%

dit toevoegen werkte voor mij:

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

neem een kijkje

dus het volledige voorbeeld 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>

Antwoord 13, autoriteit 2%

Als u aangepaste CSS definieert, moet u font-weight: 900;instellen voor een nieuwere Font Awesome-bibliotheek (vanaf versie 5). Als u dit lettertype niet instelt, kunnen er vierkanten worden weergegeven.


Antwoord 14

Als je blogger-hosting gebruikt, gebruik dan deze URL-stylesheet css:

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

Antwoord 15

Probeer de onderstaande twee links in de header-tag te houden.

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

De pictogrammen van de onderstaande link maken:

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

Antwoord 16

Ik gebruik:

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

en stijl na:

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

Antwoord 17

De CDN-link die u had geplaatst, veronderstel dat het is waarom het niet correct toont, u kunt deze hieronder gebruiken, het werkt perfect voor mij.

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

Antwoord 18

U kunt dit toevoegen in .htaccess-bestand in de map van 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>

Antwoord 19

Ik heb het getest en het werkt.

In plaats van dit

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

Gebruik het met HTTPS

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

Antwoord 20

Gebruik deze link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />

Antwoord 21

Als u een nieuwere versie van Angular gebruikt, is alleen het installeren van het pakket met npm/yarn niet voldoende. Je moet ook het css-bestand importeren (met @import "~bootstrap-icons/font/bootstrap-icons.css";) in je styles.scss.


Antwoord 22

Zorg ervoor dat u de rel en het type, zoals in rel="stylesheet" type='text/css', opneemt in de link naar het Awesomefont CSS-bestand.
Zonder deze werd het bestand voor mij niet correct geladen.


Antwoord 23

Je hebt een lettertype-importprogramma nodig.| probeer

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

Antwoord 24

Ik heb de mijne aan het werk gekregen door het hoofdbestand font-awesome.css te bewerken. Het heeft urls naar de src (woff, eot, enz…) Ik moest ze veranderen in het absolute pad, bijvoorbeeld: http://mywebsite.com/font-awesome.woff
Toen werkte het!


Antwoord 25

Wijzig dit:

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

Hiervoor:

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

Ik geloof dat je de http:nodig hebt, anders weet het niet welk protocol het moet gebruiken (en gebruikt het de verkeerde, bijvoorbeeld file:) .

Other episodes