Font mengagumkan tidak menunjukkan ikon

99

Saya menggunakan Font Awesome dan tidak ingin menambahkan CSS dengan HTTP. Saya mengunduh Font Awesome dan memasukkannya ke dalam kode saya, namun Font Awesome menampilkan kotak persegi berbatasan, bukan ikon. Ini kode saya:

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

Saya ingin tahu bagaimana cara membuat tampilan ikon daripada kotak persegi yang dibatasi.

html css font-awesome Ganesh H.
sumber
5
Ini sudah sering ditanyakan sebelumnya. Pastikan Anda menyertakan file font juga .. bukan hanya CSS stackoverflow.com/questions/14366158/…
Zim
berikut adalah tautan ke panduan turbleshooting font-mengagumkan di git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
Mehavel
harap perbarui pertanyaan dengan struktur folder Anda di mana Anda memiliki folder font-awesome, sehingga kita dapat melihat bahwa "font-awesome.min.css" benar mendapatkan jalur ttf atau tidak. Hanya css yang tidak akan berfungsi.
Ajit Hogade
stackoverflow.com/a/42355738/397872
rishta

Jawaban:

84

Dalam kasus saya, saya membuat kesalahan berikut dalam kode css saya.

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

Ini akan menimpa semua aturan keluarga fonta untuk seluruh halaman. Solusi saya adalah memindahkan kode ke body seperti itu.

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

NB: Setiap kali Anda menggunakan !importantflag di css, aturan css lain yang dideklarasikan dengan tipe yang sama pada elemen yang sama akan diganti.

Daniel Barde
sumber
4
Ini adalah solusi bagi saya. Saya telah *{font-family: Raleway}dan mengubahnya menjadi*.not(i) {font-family: Raleway}
fungusanthrax
Saya mengalami masalah ini juga, tetapi saya tidak menyadarinya selama berabad-abad karena di DevTools sepertinya FontAwesome sedang digunakan. Lihat jawaban saya untuk lebih jelasnya.
Dagmar
59

Saat Anda membuka, font-awesome.min.cssAnda dapat melihat jalur berikut:

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

Artinya Anda harus membuat direktori Fontslalu menyalin file fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) ke folder ini. Setelah itu semuanya akan bekerja dengan baik.

pengguna2980426
sumber
Karena setidaknya 0.8.1 font-awesome tidak direferensikan. Ada tiga summernotefile dalam folder font dengan ekstensi eot, ttfdan woffyang perlu didistribusikan.
ficuscr
2
Hati-hati, di 4.6.3 (jika tidak lebih awal) itu fontstidak Fontsdan pada sistem sensitif huruf yang menyebabkan masalah ...
Jason
1
mengapa font awesome tidak mengatakannya di situs web mereka? itu sebenarnya tidak eksplisit.
Matt
Hebat! Saya pikir fonta harus berada di folder yang sama dengan css, mereka harus satu folder di atas level.
Giovani Vercauteren
Selain itu, pastikan perpustakaan Anda sudah diperbarui. Saya memiliki semua logo saya kecuali logo bandcamp. Setelah saya mengunduh 4.7 yang diperbarui dan mengganti file, itu berhasil.
Ryan Walker
45

Ketahuilah bahwa versi baru (5) dari font yang mengagumkan menggunakan "fas"atau "fab"bukan "fa"prefiks.

Dikutip dari situs web mereka:

Awalan fa sudah tidak digunakan lagi di versi 5. Default baru adalah gaya fas solid dan gaya hebat untuk merek.

Inilah mengapa font saya menampilkan kotak kosong. Sekarang sudah diperbaiki.

Kode contoh:

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

Lihat: https://fontawesome.com/icons/facebook-f?style=brands

krystonen.dll
sumber
Itu berhasil untuk saya! Aneh bahwa itu belum diperbarui di dokumen
GroomedGorilla
Ini adalah satu-satunya hal yang berhasil. Jika Anda menggunakan versi modern, gunakan ini.
samurdhilbk
PENYELAMAT LANGSUNG! ubah menjadi "fa fa-bar" borked
buruk
Terima kasih, bagi saya beberapa ikon yang menyimpang dengan fas dan lainnya dengan keren, misalnya fab fa-twitter baik-baik saja tetapi fas fa-twitter menunjukkan kotak putih, lanjutkan!
pengguna1620090
Jadi jika versi baru adalah fas, lalu mengapa saya perlu mengubah kelas saya dari 'fas' menjadi 'fa'
Sam
23

Pertama, periksa apakah Anda memiliki class = "fa" serta apa pun kelas ikonnya. Jadi, tidak adil

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

Tetapi juga

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

Kemudian berfungsi seperti yang diharapkan. Ini memecahkan masalah saya.

Satu pertanyaan lagi
sumber
1
Ini berhasil untuk saya. Bagi saya, fab fa-envelope tidak berfungsi, tetapi fa-envelope berfungsi. Sangat aneh tapi memperbaiki masalah saya.
Jordan Schuetz
@JordanSchuetz "fab" khusus untuk ikon merek, seperti "fab fa-facebook-f". Di versi yang lebih baru, Anda akan menemukan "fas" untuk variasi "solid", jadi milik Anda akan ditetapkan ke "fas fa-envelope" di versi yang lebih baru, atau "fa fa-envelope" di versi yang lebih lama.
Tessa
20

Buka font-awesome.css Anda, ada kode 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
11

Periksa apakah jalur ke CSSfile Anda sudah benar. Lebih memilih tautan absolut, tautan ini lebih mudah dipahami karena kami tahu dari mana kami memulai dan mesin telusur juga akan lebih memilihnya daripada tautan relatif. Dan untuk mengurangi bandwidth, gunakan tautan dari server font-awesome:

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

Selain itu, jika Anda menggunakannya, tidak perlu mengunggah font tambahan ke server Anda dan Anda akan yakin bahwa Anda mengarahkan ke CSSfile yang benar , dan Anda juga akan mendapat manfaat dari pembaruan terkini secara instan.

Valentin Mercier
sumber
10
Saya melakukan hal yang sama dan masih memiliki kotak persegi saja
Vipul Hadiya
5

saya berurusan dengan masalah yang sama lalu saya pikir saya harus menggunakan versi baru (5 dan lebih)

gunakan cdn ini, ini akan berhasil.

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

Sebagai permulaan, Anda tidak boleh memiliki keduanya font-awesome.css dan font-awesome.min.css

Umumnya, gunakan font-awesome.cssselama pengembangan, lalu alihkan ke font-awesome.min.csssetelah Anda puas dengan situs tersebut.

Masalah seperti ini sering kali disebabkan oleh jalur dan lokasi relatif, jadi periksa di mana letak file html Anda dengan css.

Jika file html Anda ada di direktori dasar, dan css di subfolder dari root, Anda memerlukan: href="./css/font-awesome.css"(titik tunggal)

paul
sumber
4

Semua hal di atas benar namun di atas itu masalah saya adalah saya mengunduh versi gratis FA5 yang tidak memiliki:

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

Saya tidak bisa mendapatkan v5 untuk bekerja jadi saya kembali ke 4.7.0 dengan bantuan posting di atas dan itu memperbaiki masalah saya.

Mickers
sumber
1
Saya mengalami masalah dengan mendapatkan v5 + dari FontAwesome bekerja dengan baik. Telah mengubah folder "webfonts" mereka menjadi "font" di css, dan meletakkannya dengan cara yang sama, dan itu tidak bekerja dengan baik. Mengganti file dengan v4.7.0 dan berfungsi dengan sangat baik. Hrm.
Lisa Cerilli
1
Di versi 5, font-family untuk ikon bukan lagi "FontAwesome". Dalam versi gratis, sekarang menjadi "Font Awesome 5 Free" dan "Font Awesome 5 Pro" dalam versi pro. Saya mengalami masalah ini ketika saya menggunakan kode karakter secara manual di beberapa tempat, dan kode tersebut berhenti berfungsi karena font-family tidak disetel.
Tessa
4

saya menghadapi masalah yang sama .. jadi alih-alih mengunduh font yang mengagumkan, saya menambahkan tautan di kode html saya dan itu berhasil.

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

Verma hrithik
sumber
Terima kasih banyak, saya menghabiskan 24 jam untuk memperbaiki fontawesome
Mathew Magante
2

Saya berhasil menginstal Font Awesome menggunakan CDN dan javascript include (seperti yang dijelaskan di halaman ini ). Kemudian saya mencoba menyalin HTML dan CSS ke beberapa halaman lama dan tiba-tiba saya melihat kotak persegi kosong, bukan ikon.

Saya melihat jawaban Daniel (di atas) dan karena file CSS lama saya sangat besar (dan berumur bertahun-tahun), saya curiga itulah masalahnya. Namun ketika saya melihat di Chrome DevTools, sepertinya Font Awesome telah dimuat:

Screenshot dari CSS untuk Ikon Font Awesome

Saya mengharapkan untuk melihat font di coret jika ada masalah ... Namun saya benar-benar telah kehabisan semua pilihan saya jadi saya memeriksa Computed Styles dan melihat dengan jelas bahwa font Font Awesome jelas tidak digunakan. (Lihat font Rendered di bagian bawah)

Font Awesome tidak digunakan

File CSS lama saya berantakan dan saya memilih untuk tidak menyentuhnya, jadi saya menipu dengan melakukan ini - tolong jangan beri tahu siapa pun :)

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

Juga untuk diperhatikan, ketika saya meningkatkan dari Font Awesome versi 4.7.0 ke versi 5.4.1 masalah ini hilang! Saya menggunakan panduan penyiapan ini dan HTML ini

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

Bagi Anda yang menggunakan SCSS dan paket NPM, inilah solusi saya:

npm i --save @fortawesome/fontawesome-free

Kemudian di bagian atas file SCSS (idealnya file SCSS diimpor di root aplikasi Anda):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
Jeff Diederiks
sumber
Menambahkan menarik @fortawesome/fontawesome-free/css/all.cssmemperbaikinya
Andy Braham
1

Dalam kasus saya: Anda perlu menyalin seluruh folder font-awesome ke folder css proyek Anda dan bukan hanya file font-awesome.min.css .

sst
sumber
1

Jadi sepertinya menambahkan style='font-weight:normal;'atau mengubah font secara langsung pada elemen menimpa .fas{font-weight:900}definisi dalam file CSS Font Awesome. Saya kira font tersebut memiliki definisi khusus dalam file font yang berfungsi dengannya. Tampaknya font-weightharus disetel antara 501 dan 1000, atau fonta mungkin terlihat seperti balok persegi.

James Wilkins
sumber
1

masalah saya adalah orang yang memiliki suara terbanyak

*{
font-family: xxxxx
}

mengubahnya menjadi ini memecahkan masalah

body{
font-family: xxxx
}
Jamsheer
sumber
0

Anda mungkin telah menggunakan VCS (git atau somesuch) untuk mentransfer file ikon ke server. git mengatakan:

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.

Anda mungkin harus memperbaiki font Anda.

rishta
sumber
0

Saya pikir Anda tidak memiliki folder font di folder root Anda seperti folder css.

Demo

masukkan deskripsi gambar di sini

Dan folder css seperti

masukkan deskripsi gambar di sini

Dan folder font seperti

masukkan deskripsi gambar di sini

Saya harap ini akan berhasil untuk Anda.

Terimakasih.

Obaidul Haque
sumber
0

Di MacOS Mojave, saya mengalami masalah ini di Safari. Gambar font-mengagumkan bekerja di Chrome tetapi tidak di Safari, jadi saya yakin itu bukan situsnya.

Saya meminta mereka untuk dirender dengan membuka Preferensi di menu Safari, dan menonaktifkan / menghapus centang "Cegah pelacakan lintas situs" di bawah tab Privasi.

Tidak yakin mengapa ini memperbaikinya, tetapi berhasil.

Michael Shulman
sumber
0

Berdasarkan versi 5.10.1.

Solusi saya (secara lokal):

  1. Jika Anda menggunakan "fontawesome.css" atau "fontawesome.min.css", coba gunakan "all.css" sebagai gantinya (terletak di folder css).

  2. Folder "css" dan folder "webfonts" dari paket fontawesome yang Anda download harus berada pada level yang sama satu sama lain.

Dalam kasus saya, saya sudah memiliki folder css jadi saya hanya mengganti nama folder css fontawesome menjadi "css-fa".

Dengan "css-fa" dan "webfonts" di folder css saya, cukup tautkan dengan benar di editor teks Anda dan itu akan berfungsi.

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

Tou Toua Yang
sumber
0

memecahkan mengubah pemilih font-family yang ditargetkan! penting dari * { ... } menjadi *:not(i) { ... }

(dengan praprosesor scss); harap kamu terselesaikan

backciro
sumber
0

Kode di bawah ini adalah font-awesome 4.70.0. Untuk membuka font-awesome 5.11.2, klik di sini .

<!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>
PythonMaster202
sumber
0

Saya menggunakan FontAwesome Pro, dan solusi bagi saya adalah menyematkan, all.min.cssbukan fontawesome.min.css.

Bruno Leveque
sumber
0

Saya mengikuti tutorial ini untuk meng-host Font Awesome Pro 5.13 sendiri.

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

Untuk beberapa alasan saya tidak bisa <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">memuat webfontsyang pada gilirannya hanya menghasilkan kotak yang muncul. Tetapi ketika saya menggunakan <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>semuanya mulai bekerja. Kedua tautan ditambahkan dalam HTML <head>.

Ogglas
sumber
masalah dengan js ini adalah bahwa file tersebut menjadi beban lo yang berat
exequielc
0

Saya mencoba menambahkan fa 5.0.13 ke drupal 8 dengan scss. Style tidak disertakan secara default di fa.scss utama harus menambahkannya secara manual.

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

Anda perlu meletakkan file font-awesome di folder css dan mengubahnya

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

Satu hal lagi Anda dapat Mengganti File css Font-mengagumkan ini Dan dan mencoba yang ini

.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>
Luaskan cuplikan

sani
sumber
0 

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

De Zin Htang
sumber
Bekerja sangat baik dengan ini
De Zin Htang
-1 
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>
Ronald Namwanza
sumber
-1

Hati-hati dengan Bootstrap! Bootstrap akan menggantikan kelas .fa. Jika Anda membawa kedua paket secara terpisah dengan berpikir "Saya akan menggunakan Bootstrap untuk penanganan blok responsif dan Font-Awesome untuk ikon", Anda perlu menangani kelas .fa di dalam Bootstrap sehingga mereka tidak mengganggu stand- Font-Awesome implementasi sendiri.

misal: font-family 'FontAwesome' di Bootstrap akan mengganggu font-family 'Font Awesome 5 Free' di Font-Awesome dan Anda akan mendapatkan kotak putih alih-alih ikon yang Anda inginkan.

Mungkin ada cara yang lebih bersih untuk menangani hal ini, tetapi jika Anda telah melakukan checklist untuk mencoba memperbaiki masalah "kotak putih" dan masih tidak dapat mengetahuinya (seperti yang saya lakukan), ini mungkin jawaban yang Anda cari untuk.

jtubre.dll
sumber
Mengapa pemungutan suara turun? Ini kasus tepi, tetapi penyebabnya tidak mudah ditemukan di tempat lain.
jtubre
-1

Dalam kasus saya, masalahnya disebabkan oleh penggunaan beberapa gaya biasa ( far) yang tidak disertakan dalam set gratis. Mengubah untuk fasmemperbaikinya.

Yngve Høiseth
sumber