Yazı tipi harika simgesi göstermiyor

Question 1

Font Awesome kullanıyorum ve HTTP ile CSS eklemek istemiyorum. Font Awesome'i indirdim ve koduma ekledim, ancak Font Awesome, simge yerine kenarlıklı kare bir kutu gösteriyor. İşte kodum:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Kenarlıklı kare kutu yerine simge görüntüsünü nasıl yapacağımı öğrenmek istiyorum.

Question 2

Benim durumumda css kodumda aşağıdaki hatayı yaptım.

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

Bu, tüm sayfa için tüm yazı tipi ailesi kurallarını geçersiz kılar. Benim çözümüm kodu bu şekilde vücuda taşımaktı.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: css'de !importantbayrağı her kullandığınızda , aynı öğe üzerinde aynı türden bildirilen diğer herhangi bir css kuralı geçersiz kılınacaktır.

Question 3

Açtığınızda font-awesome.min.cssaşağıdaki yolu görebilirsiniz:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Bu, dizin oluşturmanız Fontsve ardından dosyaları fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) bu klasöre kopyalamanız gerektiği anlamına gelir . Bundan sonra her şey yolunda gitmeli.

Question 4

Harika fontun yeni sürümünün (5) önek yerine "fas"veya kullandığını unutmayın ."fab""fa"

Web sitelerinden alıntı yapıldı:

Fa öneki sürüm 5'te kullanımdan kaldırılmıştır. Yeni varsayılan, markaların sağlam stili ve fab stilidir.

Bu yüzden yazı tiplerim boş kareler gösteriyordu. Şimdi düzeltildi.

Örnek kod:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Bakınız: https://fontawesome.com/icons/facebook-f?style=brands

Question 5

Öncelikle, simgenin sınıfı ne olursa olsun class = "fa" ye sahip olduğunuzu kontrol edin. Yani sadece değil

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

Ayrıca

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

Sonra beklendiği gibi çalışır. Bu benim sorunumu çözdü.

Question 6

Font-awesome.css dosyanızı açın, aşağıdaki gibi kod:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

aşağıdaki gibi bir klasöre sahip olmalısınız:

font awesome -> css
 -> fonts

veya en kolay yol:

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

Question 7

CSSDosyanızın yolunun doğru olduğunu kontrol edin. Mutlak bağlantıları tercih etmek yerine, nereden başladığımızı bildiğimiz ve arama motorları da göreli bağlantılar yerine onları tercih edeceği için anlaşılması daha kolaydır. Ve bant genişliğini azaltmak için yazı tipi harika sunuculardan gelen bağlantıyı kullanın:

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

Üstelik kullanırsanız sunucunuza fazladan yazı tipi yüklemenize gerek kalmayacak, doğru CSSdosyayı işaret ettiğinizden emin olacak ve en son güncellemelerden anında yararlanacaksınız.

Question 8

aynı problemle uğraşıyordum sonra yeni versiyonu kullanmam gerektiğini anladım (5 ve artı)

bu cdn'yi kullanın işe yarayacak.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Question 9

Ben de aynı sorunla karşı karşıyaydım .. bu yüzden harika font indirmek yerine html koduma bir bağlantı ekledim ve işe yaradı.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Snippet'i genişlet

Question 10

Başlangıç olarak, ikisine de sahip olmamalısınız font-awesome.css ve font-awesome.min.css

Genel olarak, font-awesome.cssgeliştirme sırasında kullanın , ardından font-awesome.min.csssiteden memnun olduğunuzda geçiş yapın .

Bunun gibi sorunlar genellikle göreli yollardan ve konumlardan kaynaklanır, bu nedenle html dosyanızın css ile ilişkili olduğu yeri kontrol edin.

Html dosyanız temel dizindeyse ve css kökün dışındaki bir alt klasördeyse, ihtiyacınız olacak: href="./css/font-awesome.css"(tek nokta)

Question 11

Yukarıdakilerin tümü doğru, ancak benim sorunum, FA5'in ücretsiz sürümünü indirmemdi.

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

V5'in çalışmasını sağlayamadım, bu yüzden yukarıdaki gönderilerin yardımıyla 4.7.0'a geri döndüm ve sorunumu çözdüm.

Question 12

SCSS ve NPM paketini kullananlar için, işte benim çözümüm:

npm i --save @fortawesome/fontawesome-free

Sonra bir SCSS dosyasının en üstünde (ideal olarak uygulamanızın kök dizinine içe aktarılan bir SCSS dosyası):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Question 13

Font Awesome'i CDN ve javascript include ( bu sayfada açıklandığı gibi) kullanarak başarıyla yükledim . Sonra HTML ve CSS'yi bazı eski sayfalara kopyalamaya çalıştım ve aniden simgeler yerine boş kare kutular gördüm.

Daniel'in cevabını (yukarıda) gördüm ve eski CSS dosyam çok büyük olduğu için (ve yıllık) sorunun bu olduğundan şüphelendim. Ancak Chrome DevTools'a baktığımda gerçekten Font Awesome yüklenmiş gibi görünüyordu:

Bir sorun varsa yazı tipini üstü çizili olarak görmeyi bekliyordum ... Ancak tüm seçeneklerimi gerçekten tüketmiştim, bu yüzden Hesaplanmış Stilleri kontrol ettim ve Yazı Tipi Başar yazı tipinin kesinlikle kullanılmadığını açıkça gördüm. (En alttaki İşlenmiş yazı tipine bakın)

Eski CSS dosyam berbattı ve ona dokunmamayı tercih ettim, bu yüzden bunu yaparak hile yaptım - lütfen kimseye söylemeyin :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Ayrıca, Font Awesome sürüm 4.7.0'dan 5.4.1 sürümüne yükselttiğimde bu sorunun ortadan kalktığını da unutmayın! Kullandığım bu kurulum kılavuzu ve bu HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Question 14

FontAwesome Pro kullanıyorum ve benim için çözüm all.min.cssbunun yerine yerleştirmekti fontawesome.min.css.

Question 15

Kök klasörünüzde css klasöründe olduğu gibi font klasörünüz olmadığını düşünüyorum.

Demo

Ve css klasörü şuna benzer:

Ve yazı tipi klasörü gibi

Umarım sizin için işe yarar.

Teşekkürler.

Question 16

Benim durumumda: Sadece font-awesome.min.css dosyasına değil, font-awesome klasörünün tamamını proje css klasörünüze kopyalamanız gerekir .

Question 17

Bu nedenle style='font-weight:normal;', yazı tipini doğrudan öğeye eklemek veya başka şekilde değiştirmek, .fas{font-weight:900}Font Awesome'in CSS dosyasındaki tanımı geçersiz kılar . Yazı tipinin çalıştığı yazı tipi dosyasında belirli tanımları olduğunu tahmin ediyorum. Görünüşe göre font-weight501 ile 1000 arasında ayarlanmalıdır veya yazı tipi bir kare blok gibi görünebilir.

Question 18

benim sorunum oyların çoğuna sahip olandı

*{
font-family: xxxxx
}

buna değiştirmek sorunu çözdü

body{
font-family: xxxx
}

Question 19

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Snippet'i genişlet

Question 20

Simge dosyalarını sunucuya aktarmak için bir VCS (git veya somesuch) kullanmış olabilirsiniz. git diyor:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Muhtemelen yazı tiplerinizi düzeltmeniz gerekiyor.

Question 21

MacOS Mojave'de Safari'de bu sorunu yaşadım. Yazı tipi harika resimler Chrome'da çalıştı ancak Safari'de çalışmadı, bu yüzden site olmadığından emindim.

Safari menüsünde Tercihler'e gidip Gizlilik sekmesi altında "Siteler arası izlemeyi önle" seçeneğini devre dışı bırakıp / işaretini kaldırarak bunları oluşturmalarını sağladım.

Bunun neden düzeltildiğinden emin değilim, ama oldu.

Question 22

Bootstrap'e dikkat edin! Bootstrap, .fa sınıflarını geçersiz kılar. Her iki paketi de "duyarlı blok işleme için Bootstrap ve simgeler için Font-Awesome kullanacağım" şeklinde ayrı ayrı getiriyorsanız, Bootstrap içindeki .fa sınıflarını Font-Awesome'in standına müdahale etmemeleri için ele almanız gerekir. tek başına uygulama.

örneğin: Bootstrap'teki font-family 'FontAwesome' Font-Awesome'deki font-family 'Font Awesome 5 Free' ile etkileşime girecek ve istediğiniz simge yerine beyaz bir kutu alacaksınız.

Bunu halletmenin daha net yolları olabilir, ancak "beyaz kutu" sorununu gidermeye çalışırken kontrol listesine girdiyseniz ve yine de çözemiyorsanız (benim yaptığım gibi), aradığınız yanıt bu olabilir için.

Question 23

5.10.1 sürümüne dayanmaktadır.

Çözümüm (yerel olarak):

"Fontawesome.css" veya "fontawesome.min.css" kullanıyorsanız, bunun yerine "all.css" kullanmayı deneyin (css klasöründe bulunur).
İndirdiğiniz fontawesome paketinden "css" klasörü ve "webfonts" klasörü birbiriyle aynı seviyede olmalıdır.

Benim durumumda zaten bir css klasörüm vardı, bu yüzden fontawesome css klasörünü "css-fa" olarak yeniden adlandırdım.

Css klasörümde hem "css-fa" hem de "web yazı tipleri" ile, metin düzenleyicinize doğru şekilde bağlamanız yeterlidir ve çalışmalıdır.

Ör: link rel = "stylesheet" href = "css / css-fa / all.css"

Question 24

dan hedefleyen! importantized font-family seçici değişen çözüldü * { ... } için *:not(i) { ... }

(scss ön işlemcili); umarım çözdün

Question 25

Benim durumumda sorun, farücretsiz sete dahil olmayan bazı normal stilleri ( ) kullanmaktan kaynaklanıyordu . Düzeltmek için değiştiriliyor fas.

Question 26

Aşağıdaki kod harika font 4.70.0'dır. Font-awesome 5.11.2'ye gitmek için burayı tıklayın .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Question 27

Font Awesome Pro 5.13'ü kendim barındırmak için bu öğreticiyi takip ediyordum.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Bazı nedenlerden dolayı <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">yükleyemedim, webfontsbu da sadece karelerin görünmesine neden oldu. Ama kullandığımda <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>her şey çalışmaya başladı. Her iki bağlantı da HTML olarak eklendi <head>.

Question 28

Scss ile drupal 8'e fa 5.0.13 eklemeye çalışıyordum. Stiller varsayılan olarak ana fa.scss'e dahil değildir, bunları manuel olarak eklemek zorundaydı.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Question 29

font-awesome dosyasını css klasörüne koymanız ve değiştirmeniz gerekir

href = "../ css / font-awesome.css" to href = "css / font-awesome.css"

Bir şey daha Bu Font-awesome css Dosyasını Değiştirebilir ve bunu deneyebilirsiniz.

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Snippet'i genişlet

Question 30

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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