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://
doorhttps://
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 lettertypefamilieFontAwesome
gebruikt. 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 gebruiktfa
.De s in
fas
staat voor solid, en sommige pictogrammen hebben ook een
normalemodus, gespecificeerd met het voorvoegselfar
.
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 s
in fas
als 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-awesome
hebt geïnstalleerd via pakketbeheerder (yarnof npm), let er dan op welke versie is geïnstalleerd. Als alternatief, als je font-awesome
al 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-awesome
hebt geïnstalleerd, neem je een van deze twee bronbestanden font-awesome.css
of 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.0
geïnstalleerd, maar de website toont documentatie voor font-awesome v5.*
. Oplossing: bezoek de website met pictogrammen voor v4.7.0
https://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">
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:
) .