Yazı tipi Awesome çalışmıyor, kareler olarak gösterilen simgeler

225

Bu yüzden bir pazarlama sayfasını prototiplendirmeye çalışıyorum ve Bootstrap ve yeni Font Awesome dosyasını kullanıyorum. Sorun şu ki, bir simge kullanmaya çalıştığımda, sayfada görüntülenen her şey büyük bir kare.

İşte dosyaları kafasına nasıl ekleyeceğim:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

İşte bir simge kullanmaya çalıştığım bir örnek:

<i class="icon-camera-retro"></i>

Ama bütün bunlar büyük bir karede işleniyor. Neler olup bittiğini bilen var mı?

css  html  twitter-bootstrap  font-awesome 
— Connor Black
kaynak
1
Yazı tipini içe aktarıyor musunuz?
— Mayıs
1
Muhtemelen değil. Sadece .cssdosyayı eklemeniz gerektiğini düşündüm .
— Connor Black
2
Başlık, sorunun Chrome'a ​​özgü olduğunu ima eder. Diğer tarayıcılara mı yükleniyor veya başvurulan yazı tipi dosyası 404 mü oluyor?
— cimmanon
1
Ağustos 2016'dan itibaren yukarıdaki bağlantıda 3. adımı bulamıyorum ... Herhangi bir yönlendirme ??
— Saurabh Tiwari
1
Muhtemelen webfont klasörünü kopyalamayı unuttunuz mu?
— 18'de

Yanıtlar:

149

Belgelere göre (3. adım), verilen CSS dosyasını sitenizdeki yazı tipi konumuna işaret edecek şekilde değiştirmeniz gerekir.

— mayhewr
kaynak
5
Harika bir yanıt, sadece bazı ek bilgiler vermek için, yazı tiplerini css tarafından sağlanan varsayılan yola da yerleştirebilirsiniz, sadece Font-awesome.css dosyasını açın ve aşağıdaki girişi bulacaksınız: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
Aynı problemi olan gelecekteki ASP.NET MVC okuyucuları için: Tüm klasörleri doğru yere yerleştirdiyseniz, web.config dosyanıza MIME türünü burada gösterildiği gibi ekleyip eklemediğinizi doğrulayın: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Veri URI Şemasını yazı tipinin base64 sürümüyle kullanıyorsanız (çevrimiçi olarak kolayca dönüştürebilirsiniz), uygun dosya yolu ve kaynak barındırma konusunda endişelenmenize gerek yoktur.
— RenaissanceProgrammer
Not : Eğer css, aynı klasörde sadece koymak css ve yazı tiplerini değiştirmek istemiyorsanız, onay bu
— shaijut
7
@tutuca: Herkes CDN kullanamaz.
— Yörüngedeki Hafiflik Yarışları
188

Sen 2 sınıfları, olması gerekir fasınıf ve sınıf olduğunu belirler istenen simge fa-twitter, fa-searchvb ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
kaynak
4
Bu en iyi yanıt olmalı, CSS, onları hareket ettirmediğiniz sürece yazı tipi dosyaları için doğru konumu işaret ediyordu - bu beni duvara yukarı
— çekiyordu
5
Not: "Fa öneki sürüm 5'te kullanımdan kaldırıldı. Yeni varsayılan, fas katı stili ve markalar için fab stili."
— Terje Solem
1
Bu benim için düzeltildi! Angular (5 sanırım) primeng ile birlikte kullanıyorum ve o font-awesome zaten xx.component.ts (simgeleri doğru olarak işlenmiş) içindeki MenuItem tanımları için çalıştı gibi görünüyor. Ancak: xx.component.html şey (bir simge ile örneğin p-düğmesi) eklerken, tek zorundadır eklemek fa sınıf ve FA- <olursa olsun simgesi>!
— Igor
1
@TerjeSolem verdiğiniz bilgiler çok önemlidir. Sorunumu çözdü. i eski sürümünü kullanarak ama "fas" teşekkürler kullanarak
— MindRoasterMir
Thanks‍♂️ Çok teşekkürler! Açık simgeler oi oi -... Aynı ilk var oi kaybetti.
— Alexandr
54

Bunu kullan 

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

Amazon Cloudfront CDN ile benzer bir sorunum vardı ama maxcdn'den yüklemeye başladıktan sonra çözüldü

— Kumar Deepam
kaynak
6
bu, font-awesome CDN'sini kullanmak istediğinizi varsayar. Ticari bir üretim ortamı için bunu yapmam.
— Jay Edwards
48

Bu , simge üzerindeki font ailesini yanlışlıkla değiştirmediğinizden emin olmak için yardımcı olabilir . .Fa öğesinin font ailesini şu şekilde değiştirdiyseniz: FontAwesome simgesi görünmez. Her zaman aptalca ve küçük bir şeydir.

Umarım birine yardım eder.

— Bren1818
kaynak
11
BİNGO! Çok teşekkürler. Metro-UI, harika yazı tipi ailesini geçersiz kılıyordu. Bunu eklemek zorunda kaldım: .fa {font-family: 'FontAwesome'! İmportant; } sonra işe yaradı.
— Debbie A
1
Evet. Aptal ve küçük. Bu - başka bir şey için yazı tipini değiştirmek ve fontawesome simgeleri etkilemek - bana o kadar çok oldu ki aptallaştı.
— Edd
2
Evet - bu satır suçlanacaktı (daha açık olmak gerekirse,! Önemli kural): * {font-family: 'Kaynak Sans Pro'! Önemli}
— Svet
1
Bu, sorun bulmakta zaman kaybetmemek için Font Awesome'i kullanmayla ilgili en önemli ve yararlı ipucudur.
— Dez
22

LESS veya SASS kullanıyorsanız, font-awesome.less / sass dosyasını açın ve @fa-font-path: "../font";gerçek fontlara işaret eden yol değişkenini düzenleyin :

@fa-font-path: "../font";

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

@ Font-face bildirim bloğundaki yolu düzenlemeniz dışında, CSS ile aynıdır:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
— jonschlinkert
kaynak
Hepsi yerine yalnızca belirli simgeleri içe aktarmanın bir yolu var mı? Sadece css dosyamı birkaç simgeye derlemek istiyorum.
— user805981
@fa-font-path: "../fonts";benim için çalıştı. (Kayıp seklendiğine dikkat edin )
— prograhammer
18

Font-awesome.css kodunuzu açın:

@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">
— Erga Kandly
kaynak
13

Aynı sorunu daha önceki birkaç çözümle çözmeye çalıştım, ancak benim durumumda işe yaramadılar. Son olarak, bu 2 satırı HEAD'e ekledim ve işe yaradı:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
— Vojkan Cvijanovic
kaynak
12

Font Awesome 4.3.0sadece burada belirtildiği gibi maxcdn eserlerinden bağlantı kullanıyorum ,

ancak sunucunuzda yazı tiplerini ve css'i aynı klasöre koymak benim için çalıştı, bunun gibi

resim açıklamasını buraya girin

sonra sadece css bağlantı:

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

umut birine yardım eder.

— shaijut
kaynak
8

2 sınıfınız olmalı, fas sınıfı ve fa sınıfı, belki de bu işe yarayacaktır:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
— İsrail
kaynak
3
Bunu fark etmedim - v5'ten itibaren artık sınıf yerine bir fabveya sınıfa ihtiyaçları var. fasfa
— Echilon
7

Bu sorunu yaşadım. Sorun, fonttawesome yazı tipini geçersiz kılmak için önemli!

— Jonny White
kaynak
* {Font-family: Helvetica, sans-serif! İmportant; }
— Dubbo
6

Eğer çalıştığınız Maven ve Apache Wicket da Font-Müthiş ve simgeler yüklenmiyor ilgili sorunu çözmeye çalışmak için sırayla aşağıdaki kontrol edin:

Dosyalarınızı örneğin aşağıdaki dosya yapısına yerleştirdiyseniz

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Kontrol 1) Yazı tipi dosyalarını doğru bir şekilde yüklemek için Paket Kaynak Koruması'nı doğru kullanıyor musunuz?

Sınıfınızdan WebUygulamasını genişleten bir örnek:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Kontrol 2) Tüm fontların Web Tarayıcısına doğru bir şekilde aktarıldığından emin olduktan sonra, gerçekten Web Tarayıcısına neyin aktarıldığını kontrol edin, yani font dosyalarının bütünlüğü değişti mi? Kaynak dizininizdeki dosyaları ve Web Tarayıcısına aktarılan dosyaları, örneğin Firefox ve DiffDog'un Web Geliştirici Araç Çubuğu'nu (dosya karşılaştırması için) kullanarak karşılaştırın.

Özellikle Maven kullanıyorsanız kaynak filtrelemenin farkında olun. / Font dosyalarınızın bulunduğu klasörü filtrelemeyin; aksi takdirde bozulurlar.

Pom.xml dosyanızdan bir örnek

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

Yukarıdaki örnekte, css ve font dosyalarının bulunduğu src / main / java klasörünü filtrelemiyoruz.

İkili verilerin filtrelenmesi hakkında daha fazla bilgi için lütfen belgelere de bakın:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

Özellikle dokümantasyon şu şekilde uyarır: " Uyarı: Görüntü gibi ikili içerikli dosyalara filtre uygulamayın! Bu büyük olasılıkla bozuk çıktıya neden olur. Hem metin dosyalarınız hem de ikili dosyalarınız kaynak olarak varsa, birbirini dışlayan iki kaynak kümesi bildirmeniz gerekir. İlk kaynak kümesi filtrelenecek dosyaları, diğer kaynak kümesi de değiştirilmemiş kopyalanacak dosyaları tanımlar ... "

— Philipp
kaynak
6

Bu sorunu yaşadım ve her adımı dikkatle geçtim ... FA'yı yaşları boyunca kullanmama rağmen ... ve sonra posta css dosyamda bu satırı bulduğumu fark ettim:

* {
font-family: Arial !important;
}

Aptalca bir hata, ama bu gelecekte birini devirebilir!

— J Doe
kaynak
4

Sen başlık dönmelidir Erişim-Control-Allow-Origin için * fontlar dosyaları için

— tronic
kaynak
2
Kesinlikle! Yazı tipi müthiş dosyalarınızı sunmak için üçüncü taraf sağlayıcıları kullanmak sorununuzu çözmez, sadece çözülmesi için başkalarına iletirsiniz.
— Simanas
4

Aralık 2018 itibariyle, web sitelerinde font-awesome 5.xx cdn yerine bootstrapcdn'de barındırılan kararlı sürüm 4.7.0'ı kullanmayı daha kolay buluyorum - çünkü her zaman küçük sürümleri yükselttiklerinde önceki sürüm WILL kopacak.

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

Simgeler aynı:

<i class="fa fa-facebook"></i>
— ehacinom
kaynak
3

font-weight: 900;

Font Awesome 5 ile farklı bir sorun vardı. FontAwesome simgeleri için varsayılan font ağırlığı 900 olmalıdır, ancak span ve i etiketleri için 400 üzerine yazdım. Düzelttiğimde işe yaradı.

İşte Github sayfalarındaki sorun referansı, https://github.com/FortAwesome/Font-Awesome/issues/11946

Umarım birine yardım eder.

— manian
kaynak
1
teşekkür ederim, bu da benim sorunumdu. Font Ailesi'ni "Font Awesome 5 Free" olarak ayarladım, ancak font ağırlığının da 900'e ayarlanması gerekiyordu!
— Hans Vonn
3

Sürüm 5. * veya üstünü kullanıyorsanız,

all.css veya all.min.css

Fontawesome.css'i eklemek webfonts klasörüne hiçbir referansı olmadığından ve @ font-face veya font- family'e referans olmadığından çalışmaz

Fontawesome.css veya fontawesome.min.css dosyasındaki font-family özelliğinin kodunu arayarak bunu inceleyebilirsiniz.

— the_haystacker
kaynak
bu benim için mükemmel bir çözümdü - cevap şimdiye kadar çok kötü, onu görmedim ve kendim
— bulmalıydım
2

Yazı tipi yolunuzun doğru olmaması mümkün olabilir, böylece css yazı tipini yükleyemez ve simgeleri oluşturamaz, böylece ekli yazı tiplerinin telli yolunu sağlamanız gerekir.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
kaynak
2

Sürüm 5'ten başlayarak, paketi bu siteden indirdiyseniz:

https://fontawesome.com/download

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

Referansınızın şimdi en son sürümü kullanması gibi görünecektir (klasörünüzle değiştirin):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
— aşkı yaşa
kaynak
2

Bir çözüm bulma ve resmi dokümantasyonu YARARLANMAMAK için mücadele ettikten sonra, bu sorunu benim için çözdü:

  1. Fontawesome.zip dosyasını indirin. Sürüm 5.10.2 kullanıyorum ve buradan aldım https://fontawesome.com/download

  2. Zip dosyasının içinde birkaç klasör vardır.Yalnızca css ve webfonts klasörlerine ihtiyacınız vardır resim açıklamasını buraya girin

    1. Web projelerinizde 2 klasör oluşturun ve bunları css ve webfonts olarak adlandırın. resim açıklamasını buraya girin

Bu isimler zorunludur. Şimdi css ve webfonts içeriğini zip'ten projenizdeki ilgili klasörlere kopyalayın. Ve hepsi bu!

Fontawesome dikkat! Awesomeness işleri kullanıcı için kolaylaştırıyor!

— BabaNew
kaynak
1

3.2.1'den 4.0.1'e değiştim ve klasör yazı tipiydi ve şimdi yazı tipleri olarak adlandırılıyor.

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ fonts / fontawesome-webfont.eot? v = 4.0.1');

Umarım birine yardım eder.

— André Duarte
kaynak
1

Kullandığım Resmi Yazı Müthiş SUKDÖ'nün Yakut Gem benim application.css.scss için sınırının altında ekleyerek ve sabit hata

@import "font-awesome-sprockets";

Açıklama:

Font-awesome-sprockets dosyası, font dosyasına doğru yolu bulmak için kullanılan sprockets assest yardımcı Sass işlevlerini içerir.

— Marklar
kaynak
1

Eğer sass kullanıyorsanız ve main.scss dosyasına aktardıysanız @import '../vendor/font-awesome/scss/font-awesome.scss';

Hata, göreli yolundaki yazı tipi dosyalarını arayan font-awesome.scss dosyasından gelebilir.

Bu yüzden $ fa-font-path değişkenini geçersiz kılmayı unutmayın : $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

bunun gibi, cdn'yi index.html dosyasına eklemenize gerek yoktur.

— vilsbole
kaynak
1

Fontawesome-all.css dosyasını iki kez kontrol edin - en altta webfonts klasörüne bir yol olacaktır. Benim içinde "../webfonts" formatı vardı, bu da css dosyasının olduğu yerden 1 seviye yukarı bakacağı anlamına geliyordu. Tüm css dosyalarım css klasöründe olduğundan ve yazı tiplerini aynı klasöre ekledim, bu çalışma değildi.

Sadece yazı tipi klasörünüzü bir seviyeye taşıyın ve hepsi iyi olmalı :)

Font Awesome 5.0 ile test edildi

— Ross
kaynak
Bu, eski belgelere bağlantı vermeden soruyu doğrudan cevapladığı için tercih edilen cevap olmalıdır. Kudos
— Kyle Şampiyonu
1

Ben min.css dosyası eklendi yapılan, ipliği ile indirilen yazı müthiş 5 ile aynı sorunu yaşıyordu BOYUNCA all.js dosyasıyla.

Umarım bu birine yardım eder

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— Enrique Martinez
kaynak
1

/Css/all.css dosyası, temel stili ve Font Awesome'i kullanırken ihtiyaç duyacağınız tüm simge stillerini içerir. / Webfonts klasörü, yukarıdaki CSS'nin başvurduğu ve bağımlı olduğu tüm yazı tipi dosyalarını içerir.

/ Webfonts klasörünün tamamını ve /css/all.css dosyasını projenizin statik varlıklar dizinine (veya ön uç varlıkları veya satıcı şeylerini saklamayı tercih ettiğiniz yere) kopyalayın.

Kopyalanan /css/all.css dosyasına, Font Awesome özelliğini kullanmak istediğiniz her şablon veya sayfaya bir başvuru ekleyin.

Sadece Ziyaret - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Cevabı alacaksınız.

— Dipesh Chauhan
kaynak
0

Göreli yollar yerine mutlak kullanmak benim için çözdü. Göreli yollar kullanıyordum (aşağıdaki ilk örneğe bakın) ve bu işe yaramadı. Konsol üzerinden kontrol ettim ve sunucunun bir 404 döndürdüğünü gördüm, dosyalar bulunamadı.

Göreli yol 404'e neden oldu: 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Mutlak yol çapraz tarayıcıyı çözdü:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

Zorunlu olmadıkça bunu yapmanızı tavsiye etmem, ama benim için çalışıyor. Tabii, bunu font-awesome.css dosyasındaki tüm font formatları için tekrarlamanız gerekir.

— Tim
kaynak
0

Benim için çalışmadı çünkü Allow from noneapache yapılandırmamdaki kök dizin için yönerge vardı . İşte böyle çalıştım ...

Dizin yapım:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

index.html dosyam:

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

Köküme erişime izin vermemeye devam etmeyi seçtim ve bunun yerine root / font-awesome / 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— user3325776
kaynak
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.