Font Awesome tidak berfungsi, ikon ditampilkan sebagai kotak

224

Jadi saya mencoba membuat prototipe halaman pemasaran dan saya menggunakan Bootstrap dan file Font Awesome baru. Masalahnya adalah ketika saya mencoba menggunakan ikon, semua yang diberikan pada halaman adalah kotak besar.

Inilah cara saya memasukkan file di kepala:

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

Dan inilah contoh saya mencoba menggunakan ikon:

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

Tapi semua itu diterjemahkan dalam kotak besar. Adakah yang tahu apa yang sedang terjadi?

css html twitter-bootstrap font-awesome Connor Black
sumber
1
Apakah Anda mengimpor font?
mayhewr
1
Mungkin tidak. Saya pikir Anda hanya perlu memasukkan .cssfile.
Connor Black
2
Judul ini menyiratkan bahwa masalahnya khusus untuk Chrome. Apakah memuat di browser lain atau apakah file font yang direferensikan menghasilkan 404?
cimmanon
1
Tidak dapat menemukan langkah 3 pada tautan di atas pada Agustus 2016 ... Ada pengalihan ??
Saurabh Tiwari
1
Mungkin Anda lupa menyalin folder webfont?
entithat

Jawaban:

149

Menurut dokumentasi (langkah 3), Anda perlu memodifikasi file CSS yang disediakan untuk menunjuk ke lokasi font di situs Anda.

mayhewr
sumber
5
Jawaban yang bagus, hanya untuk memberikan beberapa info tambahan, Anda juga dapat menempatkan font di jalur default yang disediakan oleh css, cukup buka Font-awesome.css dan Anda akan menemukan entri berikut: @ 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
Hanya untuk pembaca ASP.NET MVC mendatang dengan masalah yang sama: Jika Anda memiliki semua folder di tempat yang benar, verifikasi jika Anda menambahkan jenis MIME pada file web.config Anda seperti yang ditunjukkan di sini: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Jika Anda menggunakan Data URI Scheme dengan versi font base64 (dapat dengan mudah dikonversi secara online), maka Anda tidak perlu khawatir tentang jalur file yang tepat dan hosting sumber daya.
— RenaissanceProgrammer
Catatan : jika Anda tidak ingin memodifikasi css, cukup masukkan css dan font di folder yang sama, centang ini
— shaijut
7
@tutuca: Tidak semua orang bisa menggunakan CDN.
— Lightness Races in Orbit
188

Anda harus memiliki 2 kelas, fakelas dan kelas yang mengidentifikasi ikon yang diinginkan fa-twitter, fa-search, dll ...

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

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
sumber
4
Ini harus menjadi jawaban teratas, CSS memberikan poin ke lokasi yang tepat untuk file font selama Anda tidak memindahkannya - ini membuat saya terangkat, terima kasih
— alex3410
5
Catatan: "Awalan fa telah ditinggalkan dalam versi 5. Default baru adalah gaya solid fas dan gaya menakjubkan untuk merek."
— Terje Solem
1
Ini memperbaikinya untukku! Saya menggunakan Angular (5 saya pikir) bersama dengan primeng dan tampaknya, font-mengagumkan sudah bekerja untuk misalnya definisi MenuItem di dalam xx.component.ts (ikon ditampilkan dengan benar). Namun: ketika menambahkan sesuatu ke xx.component.html (mis. Tombol p dengan ikon), kita harus menambahkan kelas fa dan fa- <ikon apa pun>!
— Igor
1
@TerjeSolem informasi yang Anda berikan sangat penting. Itu memecahkan masalah saya. karena saya menggunakan versi yang lebih lama tetapi menggunakan "fas" terima kasih
— MindRoasterMir
🤦‍♂️ Terima kasih banyak! Saya mendapat hal yang sama dengan ikon terbuka oi oi -... Kehilangan oi pertama.
— Alexandr
54

Gunakan ini 

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

Saya memiliki masalah yang serupa dengan Amazon Cloudfront CDN tetapi diselesaikan setelah saya mulai memuatnya dari maxcdn

— Kumar Deepam
sumber
6
ini mengasumsikan Anda ingin menggunakan font-awesome's CDN. Untuk lingkungan produksi komersial saya tidak akan melakukan ini.
— Jay Edwards
48

Ini dapat membantu, periksa untuk memastikan bahwa Anda belum secara tidak sengaja mengubah keluarga font pada ikon. Jika Anda telah mengubah keluarga font item .fa dari: FontAwesome ikon tidak akan ditampilkan. Itu selalu sesuatu yang konyol dan kecil.

Semoga itu bisa membantu seseorang.

— Bren1818
sumber
11
BINGO! Terima kasih banyak. Metro-UI mengesampingkan font-awesome font-family. Saya harus menambahkan ini: .fa {font-family: 'FontAwesome'! Important; } lalu berhasil.
Debbie A
1
Ya. Bodoh dan kecil. Ini - mengubah font untuk sesuatu yang lain dan mempengaruhi ikon fontawesome - terjadi pada saya berkali-kali sehingga menjadi bodoh.
Edd
2
Ya - baris ini yang harus disalahkan (lebih spesifik, aturan penting!): * {Font-family: 'Source Sans Pro'! Important}
Svet
1
Ini adalah tip paling penting dan berguna tentang penggunaan Font Awesome untuk menghindari kehilangan waktu menemukan masalah.
Dez
22

Jika Anda menggunakan KURANG atau SASS, buka file font-awesome.less / sass dan edit variabel path @fa-font-path: "../font";yang menunjuk ke font yang sebenarnya:

@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;
}

Sama dengan CSS, kecuali Anda mengedit jalur di blok deklarasi font-face @:

@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
sumber
Apakah ada cara untuk hanya mengimpor ikon tertentu dan bukan semuanya? Saya hanya ingin mengkompilasi file css saya ke beberapa ikon.
user805981
@fa-font-path: "../fonts";bekerja untukku. (Perhatikan yang hilang sditambahkan)
prograhammer
18

Buka kode font-awesome.css Anda seperti:

@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;
}

Anda harus memiliki folder seperti:

font awesome -> css
             -> fonts

atau cara termudah:

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

Saya mencoba memecahkan masalah yang sama dengan beberapa solusi sebelumnya, tetapi mereka tidak berhasil dalam situasi saya. Akhirnya, saya menambahkan 2 baris ini di HEAD dan berhasil:

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

saya menggunakan Font Awesome 4.3.0hanya menghubungkan dari karya maxcdn seperti yang disebutkan di sini ,

tetapi untuk host di server Anda menempatkan font dan css di folder yang sama bekerja untuk saya, seperti ini

masukkan deskripsi gambar di sini

lalu tautkan saja css:

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

semoga membantu seseorang.

shaijut
sumber
8

Anda harus memiliki 2 kelas, kelas fas dan kelas fa, mungkin ini akan berhasil:

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

// Correct
<i class="fa fa-search"></i>
Israel
sumber
3
Tidak menyadarinya - dari v5 sekarang mereka membutuhkan kelas fabatau fasbukan fakelas.
Echilon
7

Saya punya masalah ini. Masalahnya adalah saya memiliki gaya CSS font-family dengan! Penting menimpa font-font font.

Jonny White
sumber
Saya memiliki masalah yang sama dengan * {font-family: Helvetica, sans-serif! Important; }
Dubbo
6

Jika Anda bekerja dengan Maven dan Apache Wicket juga periksa hal-hal berikut untuk mencoba menyelesaikan masalah dengan Font-Awesome dan ikon tidak dimuat:

Jika Anda telah meletakkan file Anda misalnya dalam struktur file berikut

/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

Pemeriksaan 1) Apakah Anda benar menggunakan Package Resource Guard untuk memungkinkan memuat file font dengan benar?

Contoh dari kelas Anda yang memperluas Aplikasi Web:

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

}

Periksa 2) Setelah Anda memastikan bahwa semua font ditransfer dengan benar ke Browser Web, periksa apa yang sebenarnya ditransfer ke Browser Web, yaitu apakah integritas file font berubah? Bandingkan file dalam direktori sumber Anda dan file yang ditransfer ke Browser Web menggunakan, misalnya, Toolbar Pengembang Web Firefox dan DiffDog (untuk perbandingan file).

Khususnya jika Anda menggunakan Maven, waspadai penyaringan sumber daya. Jangan memfilter folder tempat file / font Anda terkandung - jika tidak, file tersebut akan rusak.

Contoh dari pom.xml Anda

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

Pada contoh di atas kita tidak memfilter folder src / main / java, tempat file css dan font terkandung.

Untuk informasi lebih lanjut tentang pemfilteran data biner, silakan juga melihat dokumentasi:

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

Secara khusus dokumentasi memperingatkan: " Peringatan: Jangan memfilter file dengan konten biner seperti gambar! Ini kemungkinan besar akan menghasilkan output yang korup. Jika Anda memiliki file teks dan file biner sebagai sumber daya, Anda perlu mendeklarasikan dua set sumber daya yang saling eksklusif. Rangkaian sumber daya pertama mendefinisikan file yang akan difilter dan rangkaian sumber daya lainnya menentukan file yang akan disalin tidak diubah ... "

Philipp
sumber
6

Saya memiliki masalah ini dan melalui setiap langkah dengan hati-hati ... meskipun saya telah menggunakan FA selama berabad-abad ... dan kemudian saya menyadari saya memiliki baris ini di file mail css saya:

* {
font-family: Arial !important;
}

Kesalahan konyol, tapi ini bisa memberi petunjuk kepada seseorang di masa depan!

J Doe
sumber
4

Anda harus mengembalikan header Access-Control-Allow-Origin ke * untuk file font Anda

tronic
sumber
2
Persis! Menggunakan penyedia pihak ketiga untuk melayani file font yang mengagumkan Anda tidak menyelesaikan masalah Anda, Anda hanya meneruskannya ke orang lain untuk dipecahkan.
Simanas
4

Pada Desember 2018, saya merasa lebih mudah untuk menggunakan versi stabil 4.7.0 yang di-host di bootstrapcdn daripada font -xx 5.xx cdn di situs web mereka - karena setiap kali mereka meningkatkan versi minor, versi sebelumnya AKAN dipatahkan.

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

Ikonnya sama:

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

font-weight: 900;

Saya memiliki masalah yang berbeda dengan Font Awesome 5. Berat font default harus 900 untuk ikon FontAwesome tapi saya menimpanya menjadi 400 untuk rentang dan saya tag. Itu hanya bekerja, ketika saya memperbaikinya.

Berikut ini adalah referensi masalah di halaman Github mereka, https://github.com/FortAwesome/Font-Awesome/issues/11946

Saya harap ini akan membantu seseorang.

manian
sumber
1
terima kasih itu masalah saya juga. Saya mengatur Font-Family ke "Font Awesome 5 Free" tetapi membutuhkan font-weight diatur ke 900 juga!
Hans Vonn
3

Jika Anda menggunakan versi 5. * atau lebih tinggi, maka Anda harus menggunakan

all.css atau all.min.css

Termasuk fontawesome.css tidak berfungsi karena tidak memiliki referensi ke folder webfonts dan tidak ada referensi ke @ font-face atau font-family

Anda dapat memeriksanya dengan mencari kode untuk properti font-family di fontawesome.css atau fontawesome.min.css

the_haystacker
sumber
yang ini adalah solusi sempurna bagi saya - sayangnya jawabannya jauh di bawah, saya tidak melihatnya dan harus mencari tahu sendiri
Cold_Class
2

Mungkin saja jalur font Anda tidak benar sehingga css tidak dapat memuat font dan merender ikon sehingga Anda perlu menyediakan jalur terdampar font yang terlampir.

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

Gunakan ini, <i class="fa fa-camera-retro" ></i>Anda belum mendefinisikan kelas fa

jitendra varshney
sumber
2

Mulai dalam versi 5, jika Anda mengunduh paket dari situs ini:

https://fontawesome.com/download

Font berada di file all.css dan all.min.css.

Inilah yang akan menjadi referensi Anda saat menggunakan versi terbaru sekarang (ganti dengan folder Anda):

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

Setelah berjuang untuk menemukan solusi dan BUKAN menemukan dokumentasi resmi bermanfaat, ini menyelesaikan masalah bagi saya:

  1. Unduh Fontawesome.zip. Saya menggunakan versi 5.10.2 dan saya mendapatkannya dari sini https://fontawesome.com/download

  2. Di dalam file zip ada beberapa folder. Anda hanya perlu folder css dan webfonts masukkan deskripsi gambar di sini

    1. Buat 2 folder di proyek web Anda, dan beri nama css dan webfonts. masukkan deskripsi gambar di sini

Nama-nama ini wajib diisi. Sekarang salin konten css dan webfonts dari zip ke folder yang sesuai dalam proyek Anda. Dan itu saja!

Waspadai fontawesome! Keangkeran membuat hal-hal sederhana bagi pengguna!

BabaNew
sumber
1

Saya telah berubah dari 3.2.1 ke 4.0.1 dan folder itu adalah font dan sekarang disebut font.

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

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

Saya harap ini membantu seseorang.

André Duarte
sumber
1

Saya menggunakan Official Font Awesome SASS Ruby Gem dan memperbaiki kesalahan dengan menambahkan baris di bawah ini ke application.css.scss saya

@import "font-awesome-sprockets";

Penjelasan:

File font-awesome-sprockets menyertakan fungsi Sass assest helper assest yang digunakan untuk menemukan jalur yang tepat ke file font.

Marklar
sumber
1

jika Anda menggunakan sass dan telah mengimpor di main.scss Anda @import '../vendor/font-awesome/scss/font-awesome.scss';

Kesalahan mungkin berasal dari file font-awesome.scss yang mencari file font di jalur relatifnya.

Jadi ingatlah untuk mengganti variabel $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

seperti ini tidak perlu menambahkan cdn di index.html Anda

vilsbole
sumber
1

Periksa file fontawesome-all.css - di bagian paling bawah akan ada path ke folder webfonts. Milik saya memiliki "../webfonts" format di dalamnya, yang berarti bahwa file css akan mencari 1 level dari tempat itu. Karena semua file css saya ada di folder css dan saya menambahkan font ke folder yang sama, ini tidak berfungsi.

Cukup pindahkan folder font Anda ke atas dan semuanya akan baik-baik saja :)

Diuji dengan Font Awesome 5.0

Ross
sumber
Ini harus menjadi jawaban yang disukai karena itu menjawab pertanyaan secara langsung tanpa menghubungkan ke dokumentasi yang sudah ketinggalan zaman. Kudos
Kyle Champion
1

Saya mengalami masalah yang sama dengan font mengagumkan 5 diunduh dengan benang, saya membuat menambahkan file min.css SEPANJANG dengan file all.js.

Semoga ini bisa membantu seseorang

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

File /css/all.css berisi gaya inti ditambah semua gaya ikon yang Anda perlukan saat menggunakan Font Awesome. Folder / webfonts berisi semua file jenis huruf yang menjadi referensi dan bergantung pada CSS di atas.

Salin seluruh folder / webfonts dan /css/all.css ke direktori aset statis proyek Anda (atau di mana pun Anda lebih suka menyimpan aset front end atau barang vendor).

Tambahkan referensi ke file /css/all.css yang disalin ke dalam setiap templat atau halaman yang Anda inginkan untuk menggunakan Font Awesome.

Just Visit - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Anda akan mendapatkan jawabannya.

Dipesh Chauhan
sumber
0

Menggunakan absolut alih-alih jalur relatif memecahkannya untuk saya. Saya menggunakan jalur relatif (lihat contoh pertama di bawah) dan itu tidak berhasil. Saya memeriksa melalui konsol dan menemukan server mengembalikan 404, file tidak ditemukan.

Jalur relatif menyebabkan 404: 

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

Path absolut menyelesaikannya lintas peramban:

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

Saya tidak akan merekomendasikan melakukan ini kecuali Anda harus, tetapi itu berhasil untuk saya. Tentu, Anda harus mengulang ini untuk semua format font dalam file font-awesome.css.

Tim
sumber
0

Itu tidak bekerja untuk saya karena saya punya Allow from none arahan untuk direktori root di konfigurasi apache saya. Begini cara saya membuatnya bekerja ...

Struktur direktori saya:

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

di mana index.html saya memiliki:

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

Saya memilih untuk terus melarang akses ke root saya dan sebagai gantinya menambahkan entri direktori lain di konfigurasi apache saya untuk root / font-awesome / 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
pengguna3325776
sumber