Font mengagumkan tidak menunjukkan ikon

Question 1

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.

Question 2

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.

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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

Question 7

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.

Question 8

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

Question 9

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)

Question 10

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.

Question 11

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

Question 12

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:

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)

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>

Question 13

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

Question 14

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

Question 15

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.

Question 16

masalah saya adalah orang yang memiliki suara terbanyak

*{
font-family: xxxxx
}

mengubahnya menjadi ini memecahkan masalah

body{
font-family: xxxx
}

Question 17

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.

Question 18

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

Demo

Dan folder css seperti

Dan folder font seperti

Saya harap ini akan berhasil untuk Anda.

Terimakasih.

Question 19

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.

Question 20

Berdasarkan versi 5.10.1.

Solusi saya (secara lokal):

Jika Anda menggunakan "fontawesome.css" atau "fontawesome.min.css", coba gunakan "all.css" sebagai gantinya (terletak di folder css).
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"

Question 21

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

(dengan praprosesor scss); harap kamu terselesaikan

Question 22

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>

Question 23

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

Question 24

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

Question 25

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

Question 26

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

Question 27

<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

Question 28

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>

Question 29

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.

Question 30

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