FontAwesome simgeleri gösterilmiyor. Neden?

124

Son zamanlarda bu web sitesini geliştiriyorum ve içine harika simgeler koymaya çalışıyorum, bu yüzden ölçeklenebilir.

Sorun şu ki, ortaya çıkmıyorlar.

HTML'ye bakın:

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

veya

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

Stil sayfası referansını kafasına koydum.

Neden ortaya çıkmadıklarını bilmiyorum.

İşte referans:

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

Pekala, işte tam 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>
html  css  font-awesome 
— Luis Valdez
kaynak
1
Benim için iyi çalışıyor: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Lütfen font-awesome'in başka bir sürümünü deneyin. Örneğin, 4.3.0 sürümünde bazı simgeler benim için görünmüyordu, ancak 4.7.0'da görünüyorlardı.
— Almir Campos
Lütfen stackoverflow.com/a/55977898/4874281 adresini kontrol edin . Umarım birine yardımcı olur
— manian

Yanıtlar:

105

Referansınız altında, şuna sahipsiniz:

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

Özellikle, href= kısım.

Ancak, tam html'nizin altında şudur:

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

Bunun için tam html'nizde src=ile değiştirmeyi denediniz href=mi?

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

Benim için çalışıyor: http://codepen.io/TheNathanG/pen/xbyFg

— NathAng
kaynak
10
Not : Bazı zamanlar boş kutuları, aynı klasörde css ve yazı tipleri dosya kontrol etmesini o zaman tekrar kontrol görebilirsiniz bu , umut birisi yardımcı olur.
— shaijut
104

Eksik yazı tipi harika simgeleri arayanlar için birkaç fikir topladım:

  • CDN'ye doğru bir bağlantı kullandığınızdan emin olun, örneğin:

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Sayfanız HTTPS kullanıyorsa, HTTPS kullanarak yazı tipi harika CSS'ye bağlanıyor musunuz ( yukarıdaki bağlantıda http://ile değiştirin https://).

  • AdBlock Plus veya uBlock'un etkinleştirilmediğini iki kez kontrol edin. Bazı simgeleri engelliyor olabilirler.

  • Tarayıcınızın önbelleğini sıfırlayın. (Chrome'da yeniden yükle düğmesine uzun bir süre tıklayın ve Sabit Önbellek Sıfırlama'yı seçin)

  • Kullandığınız <span>veya <i>öğesinin FontAwesomeyazı tipi ailesini kullandığından emin olun . Örneğin, sadece

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

    fakat

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

    CSS'nizde aşağıdaki gibi bir şey varsa çalışmaz:

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

  • IE8 kullanıyorsanız, HTML5 Shim kullanıyor musunuz?

  • Bu işe yaramazsa, Font Awesome Wiki'de daha fazla Sorun Giderme Fikirleri vardır .

— mxro
kaynak
3
Ekleyeceğim: .htaccess'in ttf, svg, eot veya woff uzantılarını engellemediğinden emin olun
— BassMHL
yazı tipi geçersiz kılınır! Pek çok cevap bundan bahsetmiyor. Kontrol ettim, kontrol ettim, kontrol ettim ve sonunda anladım. Bu sorunla geçmişte de karşılaştım ve nedenini bilmiyordum ama şimdi biliyorum.
— adrianmc
1
faÖnce single'ı sınıf adı olarak eklemeyi özledim . Teşekkürler. Sorunu adım adım bulmak için mükemmel cevap.
— Kai Noack
Benim için yazı tipi ailesini belirleyen başka bir şeydi
— levininja
Benim için "font-weight: 500" vardı (kullandığım temayla tutarlı olması için). Bunu "font-weight: bold" olarak ayarlamak zorunda kaldım
— bowlerae
24

İlk başta bunu Font Awesome 5 ile çalışacak hale getiremedim :

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

Bu yüzden harika yazı tipine aşina olmadığım için buraya geldim. Bu yüzden daha fazla baktığımda, sorunumun yalnızca sürümle ilgili bir sorun olduğunu fark ettim.

w3schools bu durumda bana yardımcı oldu.

Font Awesome fas5'teki yenilik öneki, Font Awesome 4'ün kullandığıfa .

S in katıfas anlamına gelir ve bazı simgelerin önek kullanılarak belirlenen normal bir modu da vardır .far

FontAwesome css klasöründeki aşağıdaki gibi farklı dosyaları zaten fark ettim:

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

İşte o zaman hatamı anladım. Tek yapmam gereken uygun css'i html'ye dahil etmekti:

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

Ve sonra doğru öğeye referans verin:

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

Bu kurulum benim için çalışıyor. Tüm öğelerin her türde eşdeğeri olmasa da. Bu işe yaramayacak:

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

Bir yan not olarak, tüm ayrı dosyalara başvurmak istemediğinizde bu yeterli olacaktır:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
kaynak
Ek olarak, hile sayfası her simge türü için hangi öğelerin mevcut olduğunu gösterir.
— Ruard van Elburg
12

Benimki çalışmıyordu çünkü kullandığım FA sürümünde yayınlanmayan bir simge istiyordum.

Bu, bazı simgelerin neden göründüğünü ancak diğerlerinin neden göstermediğini yanıtlar.

Oldukça açık ama sanırım bazı insanlar hala buna aşık. Benim gibi.

— Taiguara Andrade
kaynak
4
Evet, soruya bir cevap veriyor.
— Bobort
2
Veya kullandığınız sürümde artık bulunmayan daha eski bir yazı tipini kullanmaya çalışıyorsunuz. Bu, örneğin, eski adı olan zamanlar çemberi değil, zamanlar çemberi olarak adlandırılır: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Teşekkür ederim!! Bu bütün gün saçımı
— 24x7
5

Maxcdn.bootstrapcdn.com için https kullanmanız gerekir. Yalnızca maxcdn üzerinde https desteği CORS

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

Fonts dizinini CSS dosyalarımla aynı seviyeye koyarak bu sorunu çözdüm.

— lolo
kaynak
3

2018 yılında bu out kontrol edilebilir kim için ben yazı müthiş 4.7.0 kullanıyorum ve bu sorun sadece dışarı alarak çözüldü got siçinde faskodda görüldüğü gibi <i class="fa fa-[icon-name]"></i>. Bu başlangıçta idi <i class="fas fa-[icon-name]"></i>.

Bu yardımcı olur umarım.

— Goodluck Leo
kaynak
Ayrıca node.js sunucusunu çalıştırıyorum.
— Goodluck Leo
Font Awesome 5'teki yenilik, fas önekidir, Font Awesome 4 fa kullanır. Gönderen W3Schools'da
— Ruard van Elburg
3

notlar

Bu cevap, fontawesome'nın en son sürümü v5. * Olduğunda , ancak iplik ve npm sürümü v4. * (21.06.2019) 'u gösterdiğinde oluşturulur. Diğer bir deyişle, paket yöneticileri aracılığıyla yüklenen sürümler en son sürümün arkasındadır!

font-awesomePaket yöneticisi ( iplik veya npm ) aracılığıyla kurulum yaptıysanız , lütfen hangi sürümün kurulu olduğunu bilin . Alternatif olarak, önceden yüklediysenizfont-awesome uzun zaman önce , hangi sürümün kurulu olduğunu kontrol edin.

Font-awesome'i yeni bağımlılık olarak yükleme:

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

Hangi font-awesome sürümünün zaten yüklü olduğunu kontrol etme:

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

Sorun

font-awesomeBağımlılığı kurduktan sonra , bu iki kaynak dosyadan birini font-awesome.cssveya font-awesome.min.css(kurulmuş olan node_modules/font-awesome/css/) web sayfanızın başlığına dahil edersiniz, örn.

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

Ardından, https://fontawesome.com/ adresini ziyaret edin . Ücretsiz simgeleri seçersiniz ve oturum açma simgesini ararsınız (örnek olarak). Simgeyi kopyalarsınız, örneğin <i class="fas fa-sign-in-alt"></i>html'nize yapıştırırsınız ve simge gösterilmez veya kare veya dikdörtgen olarak görüntülenir!

Çözüm

Esasen, paket yöneticileri aracılığıyla yüklenen sürümler, https://fontawesome.com/ web sitesinde gösterilen sürümün arkasındadır . Gördüğünüz gibi biz kurduk, font-awesome v4.7.0ancak web sitesi için belgeleri gösteriyor font-awesome v5.*. Çözüm, v4.7.0 https://fontawesome.com/v4.7.0 için simgeleri belgeleyen web sitesini ziyaret edin , örneğin uygun simgeyi kopyalayın <i class="fa fa-sign-in" aria-hidden="true"></i>ve html'nize dahil edin.

— Lukasz Dynowski
kaynak
Burada en son sürüme sahip yeni bir paket yayınladılar . Aynı zamanda daha az ve sass ile de uyumlu
— DerpyNerd
2

Fontawesome'daki güncelleme ile ilgili olarak yukarıdaki cevaplara biraz daha bilgi ekleyerek,

Font awesome 5 kullanıyorsanız,

a. sadece aşağıdaki HTML'yi kopyalayıp yapıştırın,

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

Not: Tüm komut dosyalarınızı <body> {YOUR_SCRIPT_HERE}</body>(YOUR_CLOSING_BODY) içinde ve hemen öncesinde eklemeniz daha iyidir.

b. Ve örneğin,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
kaynak
Fa web sitesine bağlanmak yerine css'yi yerel olarak sunmaya ne dersiniz?
— Ghilteras
bu benim durumumdu ... js dosyam yoktu, şimdi çalışıyor!
— Cristian Sepulveda
2

bu benim için çalıştı:

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

Bir göz at

tam örnek:

<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>
Snippet'i genişlet

— edgarmtze
kaynak
2

Özel CSS tanımlarsanız, font-weight: 900;daha yeni bir Font Awesome kitaplığı (sürüm 5'ten itibaren) için ayarlamanız gerekir . Bu yazı tipi ağırlığını ayarlamazsanız, kareler gösterebilir.

— jurev
kaynak
2

Sürüm 5 için:

Ücretsiz paketi bu siteden indirdiyseniz:

https://fontawesome.com/download

Yazı tipleri all.css ve all.min.css dosyasındadır.

Yani referansınız şuna benzer:

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

Fontawesome.css dosyası, yazı tipi referansını içermez.

— aşkı yaşa
kaynak
1

Blogger barındırma kullanıyorsanız, şu url stil sayfasını kullanın css:

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

Aşağıdaki iki bağlantıyı başlık etiketinde tutmayı deneyin.

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

Simgeleri aşağıdaki bağlantıdan almak:

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

Kullanırım:

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

ve sonra stil:

.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);
}
— Tran Anh Hien
kaynak
1

Göndermiş olduğunuz CDN bağlantısı sanırım neden doğru gösterilmiyordu, bunu aşağıda kullanabilirsiniz, benim için mükemmel çalışıyor.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Snippet'i genişlet

— John Kesh Mahugu
kaynak
0

Awesomefont css dosyasının bağlantısına rel ve type "rel =" stylesheet "type = 'text / css'" şeklinde eklediğinizden emin olun. Bunlar olmadan dosya benim için doğru şekilde yüklenmiyordu.

— Elliot Robert
kaynak
0

Bunu .htaccess dosyasına harika yazı tipi dizinine ekleyebilirsiniz

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>
— Waleed Hakim
kaynak
0

Test ettim ve çalışıyor.

Bunun yerine

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

HTTPS ile kullanın

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atıf Tarık
kaynak
-1

Bir yazı tipi içe aktarıcısına ihtiyacınız var. Deneyin

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

Ana font-awesome.css dosyasını düzenleyerek benimkini çalıştırdım. Src'ye url'leri var (woff, eot, vb ...) Onları mutlak yola değiştirmem gerekiyordu, örneğin: http://mywebsite.com/font-awesome.woff Sonra işe yaradı!

— crystallove18
kaynak
2
Harici bir dosyayı düzenlediğiniz için bunu önermemeyi tercih ederim. Siz (veya ekibiniz) fontawesome'yı her güncellemelerine ihtiyaç duyduklarında bunu hatırlamanız gerekecektir.
— J Cordero
-6

Bunu değiştir:

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

Buna:

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

http:Aksi halde hangi protokolün kullanılacağını bilmediğine inanıyorum (ve file:sonuç olarak yanlış olanı kullanıyor ).

— Shahar
kaynak
@ user3870894 Aslında hrefjavascript düşünüyordum. Ancak yeni kodu deneyin.
— Shahar
@ user3870894 o_o Daha sonra tam HTML veya en azından ana kısımları gönderin. Konsol ne diyor? Öğeyi incelemeyi denediniz mi?
— Shahar
2
@Shahar //Tarayıcıyı kullanarak , talep eden sitenin kullandığı protokolü seçer. Siteniz https kullanırken, https'yi seçer. Http kullanıyorsanız, dosyayı CDN'den istemek için http kullanır. Tabii ki, siteyi yerel olarak açarsanız file:///, ki bu önerilmez, tarayıcı gerçekten de fileprotokol ile cdn'yi açmaya çalışacaktır .
— Robin van Baalen
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.