Pictogramele FontAwesome nu se afișează. De ce? [închis] (Programare, Html, Css, Font Minunat)

Luis Valdez a intrebat.
a intrebat.

Recent, am dezvoltat acest site web și încerc să pun un font awesome iconițe în el, astfel încât să fie scalabil.

Chestia este că nu apar.

Uită-te la HTML:

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

sau

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

Am pus referința foii de stil în cap.

Nu știu de ce nu apar.

Aici este referința:

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

Bine, aici este html-ul complet:

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

Comentarii

  • Mie îmi funcționează bine: jsfiddle.net/ZF7x4 –  > Por Shahar.
  • related stackoverflow.com/questions/14366158/… –  > Por Ciro Santilli新疆棉花TRUMP BAN BAD.
  • Vă rugăm să încercați o altă versiune de font-awesome. De exemplu, unele pictograme nu îmi apăreau pe versiunea 4.3.0, dar au apărut pe 4.7.0. –  > Por Almir Campos.
  • Am reușit să fac Font Awesome să funcționeze folosind fișierul all.min.css. –  > Por Rob Breidecker.
25 răspunsuri
NathanG

Sub referință, aveți acest lucru:

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

În mod specific, în href= parte.

Totuși, sub html-ul tău complet este asta:

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

Ați încercat să înlocuiți src= cu href= în html-ul complet pentru a deveni acest lucru?

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

Pentru mine funcționează: http://codepen.io/TheNathanG/pen/xbyFg

Comentarii

  • Notă:: uneori s-ar putea să vedeți căsuțe goale, apoi verificați de două ori dacă aveți css și fonturi în același dosar verificați acest lucru, sper că ajută pe cineva. –  > Por Shaiju T.
mxro

Pentru căutătorii de pictograme cu fonturi care lipsesc, am adunat câteva idei:

  • Asigurați-vă că folosiți un link corect către CDN, cum ar fi:

    <link 
      href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
      rel="stylesheet"  type='text/css'>
    
  • Dacă pagina dvs. folosește HTTPS, faceți legătura către CSS font-awesome folosind HTTPS (înlocuiți http:// cu https:// în link-ul de mai sus).

  • Verificați de două ori dacă nu aveți AdBlock Plus sau uBlock activat. S-ar putea ca acestea să blocheze unele dintre pictograme.

  • Resetați memoria cache a browserelor. (În Chrome, faceți un clic lung pe butonul de reîncărcare și selectați Hard Cache Reset).

  • Asigurați-vă că <span> sau <i> pe care îl folosiți, utilizează elementul FontAwesome familia de fonturi. De exemplu, nu trebuie să fie doar

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

    ci

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

    Nu va funcționa dacă aveți ceva de genul următor în CSS-ul dvs:

    * {
      font-family: 'Josefin Sans', sans-serif !important;   
    }
    
  • Dacă folosiți IE8, folosiți un Shim HTML5?

  • Dacă acest lucru nu funcționează, există și alte Idei de rezolvare a problemelor pe site-ul Font Awesome Wiki.

Comentarii

  • Voi adăuga : Verificați că .htaccess-ul dvs. nu blochează extensiile ttf, svg, eot, sau woff –  > Por BassMHL.
  • suprascrieri de fonturi! Nu multe răspunsuri menționează acest lucru. Am verificat și am verificat și am verificat și am verificat și în cele din urmă mi-am dat seama. Am mai întâlnit această problemă și în trecut și nu am știut de ce, dar acum știu. –  > Por adrianmc.
  • Am omis să adaug single-ul fa ca nume de clasă mai întâi. Mulțumesc. Răspuns perfect pentru a găsi problema pas cu pas. –  > Por Avatar.
  • Pentru mine a fost altceva, setarea font-family –  > Por levininja.
  • La mine avea „font-weight: 500” (ca să fie în concordanță cu tema pe care o foloseam). A trebuit să o setez la „font-weight: bold” –  > Por bowlerae.
Ruard van Elburg

La început nu am reușit să fac să funcționeze acest lucru cu Font Awesome 5:

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

De aceea am venit aici, nefiind familiarizat cu font awesome. Așa că atunci când m-am uitat mai departe am observat că problema mea era doar o problemă cu versiunea.

w3schools m-a ajutat în acest caz.

O noutate în Font Awesome 5 este reprezentată de fas prefixul, Font Awesome 4 folosește fa.

S din fas reprezintă solid, iar unele pictograme au și un regulat specificat prin utilizarea prefixului far.

Am observat deja diferitele fișiere din dosarul FontAwesome css, cum ar fi:

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

Și atunci mi-am dat seama de greșeala mea. Tot ce trebuia să fac era să includ css-ul corespunzător în 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">

Și apoi să fac referire la elementul corect:

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

Această configurație funcționează pentru mine. Deși nu toate elementele au echivalente în fiecare tip. Acest lucru nu va funcționa:

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

Ca o notă secundară, atunci când nu doriți să faceți referire la toate fișierele separate, atunci acest lucru va fi suficient:

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

Comentarii

  • În plus, opțiunea foaie de calcul arată ce elemente sunt disponibile pentru fiecare tip de pictogramă. –  > Por Ruard van Elburg.
  • A trebuit să includ font-awesome.min.css fwiw. Acest post m-a ajutat totuși. –  > Por L0uis.
Taiguara Andrade

Al meu nu funcționa pentru că am vrut o pictogramă care nu a fost lansată în versiunea FA pe care o foloseam.

Acest lucru răspunde de ce unele pictograme arată, dar altele nu.

Destul de evident, dar cred că unii oameni încă se mai lasă păcăliți. Ca și mine.

Comentarii

  • Da, oferă un răspuns la întrebare. –  > Por Bobort.
  • Sau încerci să folosești un font mai vechi care nu mai există în versiunea pe care o folosești. Acesta, de exemplu, se numește doar times-circle, nu times-circle-o, care este numele vechi: fontawesome.com/v4.7.0/icon/times-circle-o –  > Por smoore4.
  • Vă mulțumesc!!! Acest lucru m-a făcut să mă trag de păr toată ziua –  > Por 24×7.
Chatchawan Wongsiriprasert

Trebuie să folosiți https pentru maxcdn.bootstrapcdn.com. Doar https pe maxcdn suportă CORS

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

Sundar Gsv

Doar adăugând câteva informații suplimentare la răspunsurile de mai sus în ceea ce privește actualizarea pe fontawesome,

Dacă utilizați font awesome 5,

a. doar copiați și lipiți HTML-ul de mai jos,

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

Notă: Mai bine să includeți toate scripturile dvs. în cadrul fișierului <body> {YOUR_SCRIPT_HERE}</body> și chiar înainte de (YOUR_CLOSING_BODY)

b. Și, de exemplu,

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

Comentarii

  • Ce-ar fi să serviți css-ul la nivel local în loc să creați un link către site-ul fa? –  > Por Ghilteras.
  • acesta a fost cazul meu… nu aveam fișierul js, acum funcționează! –  > Por Cristian Sepulveda.
lolo

Am rezolvat această problemă punând directorul Fonts la același nivel cu fișierele mele CSS.

Noroc Leo

Pentru oricine ar putea să verifice asta în 2018. Folosesc font awesome 4.7.0 și am rezolvat această problemă prin simpla scoatere a s în fas așa cum se vede în cod <i class="fa fa-[icon-name]"></i>. Acest lucru a fost inițial <i class="fas fa-[icon-name]"></i>.

Sper că vă ajută.

Comentarii

  • În plus, rulează serverul node.js. –  > Por Noroc Leo.
  • Nou în Font Awesome 5 este prefixul fas, Font Awesome 4 folosește fa. De la w3schools –  > Por Ruard van Elburg.
Lukasz Dynowski

Note

Acest răspuns este creat atunci când cea mai recentă versiune de fontawesome este v5.* dar yarn și npm indică versiunea v4.* (21.06.2019). Cu alte cuvinte, versiunile instalate prin intermediul managerilor de pachete se află în spatele celei mai recente versiuni !

Dacă ați instalat font-awesome prin intermediul unui manager de pachete (yarn sau npm), atunci vă rugăm să fiți atenți la versiunea instalată. Alternativ, dacă ați instalat deja font-awesome cu mult timp în urmă, atunci, verificați ce versiune a fost instalată.

Instalarea font-awesome ca dependență nouă:

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

Verificați ce versiune de font-awesome este deja instalată:

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

Problema

După ce ați instalat font-awesome dependență, ați încorporat unul dintre aceste două fișiere sursă font-awesome.css sau font-awesome.min.css (fondat în node_modules/font-awesome/css/) în antetul a paginii dvs. web, de exemplu

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

În continuare, vizitați https://fontawesome.com/. Selectați pictograme gratuite și căutați sign-in (ca exemplu). Copiați pictograma, de ex. <i class="fas fa-sign-in-alt"></i>, o lipiți în html și, pictograma nu este afișată, sau este afișată sub formă de pătrat sau dreptunghi !

Soluție

În esență, versiunile instalate prin intermediul managerilor de pachete se află în spatele versiunii care este afișată pe https://fontawesome.com/ site-ul web. După cum puteți vedea, am instalat font-awesome v4.7.0 dar, site-ul web arată documentația pentru font-awesome v5.*. Soluție, vizitați site-ul web care documentează pictogramele pentru v4.7.0 https://fontawesome.com/v4.7.0, copiați pictograma corespunzătoare, de ex. <i class="fa fa-sign-in" aria-hidden="true"></i> și încorporați-o în html-ul dumneavoastră.

Comentarii

  • Ei au lansat un nou pachet aici care conține cea mai recentă versiune. Este, de asemenea, compatibil cu less și sass o/ –  > Por DerpyNerd.
edgarmtze

adăugarea acestui lucru a funcționat pentru mine:

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

aruncați o privire

deci exemplul complet este:

jurev

Dacă definiți un CSS personalizat, trebuie să setați font-weight: 900; pentru o bibliotecă Font Awesome mai nouă (de la versiunea 5). Dacă nu setați acest font-weight s-ar putea să apară pătrate.

live-love

Pentru versiunea 5:

Dacă ați descărcat pachetul gratuit de pe acest site:

https://fontawesome.com/download

Fonturile se află în fișierul all.css și all.min.css fișier.

Deci, referința dvs. va arăta cam așa:

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

Fișierul fontawesome.css nu include referința la font.

Rahul.S

Am o problemă similară, Afișează pictogramele în pătrat, am încercat conform instrucțiunilor specificate aici : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Rezolvat prin utilizarea acestei referințe în secțiunea head a paginii html

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

Nurdin BM.

Dacă folosiți blogger hosting, utilizați acest url stylesheet css:

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

Cherry

Încercați cele două linkuri de mai jos păstrați în tag-ul header.

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

Obținerea pictogramelor de la link-ul de mai jos :

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

Tran Anh Hien

Eu folosesc:

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

și stilul după:

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

John Kesh Mahugu

linkul CDN pe care l-ai postat cred că este motivul pentru care nu se afișa corect, îl poți folosi pe acesta de mai jos, pentru mine funcționează perfect.

Waleed Hakim

Puteți adăuga acest lucru în fișierul .htaccess în directorul fontului minunat

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>

Atif Tariq

Am testat și funcționează.

În loc de acest lucru

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

Utilizați-l cu HTTPS

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

samin

Utilizați acest 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" />

NobodySomewhere

Dacă utilizați o versiune mai nouă de Angular, simpla instalare a pachetului cu npm/yarn nu este suficientă. De asemenea, trebuie să importați fișierul css (cu @import "~bootstrap-icons/font/bootstrap-icons.css";) în fișierul dvs. styles.scss .

Elliot Robert

Asigură-te că incluzi rel și tipul, ca în rel="stylesheet" type='text/css', în link-ul către fișierul Awesomefont CSS.Fără acestea, fișierul nu se încărca corect pentru mine.

SIAMWEBSITE

Aveți nevoie de un importator de fonturi.| încercați

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

crystallove18

Eu am reușit să-l fac pe al meu să funcționeze prin editarea fișierului font-awesome.css principal. Acesta are urls către src (woff, eot, etc…) A trebuit să le schimb în calea absolută, de exemplu: http://mywebsite.com/font-awesome.woff Apoi a funcționat!

Comentarii

  • Aș prefera să nu recomand acest lucru, deoarece editați un fișier extern. Tu (sau echipa ta) va trebui să reții acest lucru de fiecare dată când va trebui să actualizeze fontawesome. –  > Por J Cordero.
Shahar

Schimbați asta:

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

În aceasta:

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

Cred că aveți nevoie de http: altfel nu știe ce protocol să folosească (și îl folosește pe cel greșit, file: de exemplu, ca rezultat).

Comentarii

  • @user387070894 De fapt, este href, mă gândeam la javascript. Dar încearcă noul cod. –  > Por Shahar.
  • @user387070894 o_o Postați HTML complet sau cel puțin părțile principale atunci. Ce spune consola? Ați încercat să inspectați elementul? –  > Por Shahar.
  • @Shahar Folosind // browserul alege protocolul pe care îl folosește site-ul solicitant. Dacă site-ul dvs. utilizează https, acesta alege https. Dacă site-ul dvs. folosește http, acesta folosește http pentru a solicita fișierul de la CDN. Bineînțeles, dacă deschideți site-ul local utilizând file:///, ceea ce nu este recomandat, browserul va încerca într-adevăr să deschidă cdn-ul cu ajutorul protocolului file protocol. –  > Por Robin van Baalen.