Ikon FontAwesome tidak muncul. Mengapa?

123

Baru-baru ini saya telah mengembangkan situs web ini dan saya mencoba memasukkan ikon font yang luar biasa di dalamnya, sehingga dapat diskalakan.

Masalahnya adalah mereka tidak muncul.

Lihat HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

atau

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Saya menempatkan referensi stylesheet di kepala.

Saya tidak tahu mengapa mereka tidak muncul.

Berikut referensinya:

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

Baiklah, ini html lengkapnya:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Luis Valdez
sumber
1
Berfungsi baik untuk saya: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Silakan coba versi lain dari font-awesome. Misalnya, beberapa ikon tidak muncul untuk saya di versi 4.3.0 tetapi ikon tersebut muncul di 4.7.0.
— Almir Campos
Harap periksa stackoverflow.com/a/55977898/4874281 . Semoga ini membantu seseorang
— manian

Jawaban:

105

Di bawah referensi Anda, Anda memiliki ini:

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

Secara khusus, href=bagiannya.

Namun, di bawah html lengkap Anda adalah ini:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Sudahkah Anda mencoba mengganti src= dengan href=dalam html lengkap Anda menjadi ini?

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

Bekerja untuk saya: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
sumber
10
Catatan : beberapa kali Anda mungkin melihat kotak kosong, lalu periksa kembali apakah Anda memiliki file css dan font di folder yang sama, periksa ini , semoga membantu seseorang.
— shaijut
104

Untuk pencari ikon font-mengagumkan yang hilang, saya telah mengumpulkan beberapa ide:

  • Pastikan Anda menggunakan tautan yang benar ke CDN, seperti:

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Jika halaman Anda menggunakan HTTPS, apakah Anda menautkan ke CSS yang luar biasa font menggunakan HTTPS (ganti http://denganhttps:// di link di atas).

  • Periksa kembali apakah Anda tidak mengaktifkan AdBlock Plus atau uBlock. Mereka mungkin memblokir beberapa ikon.

  • Setel ulang cache browser Anda. (Di Chrome lakukan looong klik pada tombol reload dan pilih Hard Cache Reset)

  • Pastikan bahwa elemen <span>atau <i>yang Anda gunakan, menggunakan jenis FontAwesomefont. Misalnya, tidak boleh adil

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

    tapi

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

    Ini tidak akan berfungsi jika Anda memiliki sesuatu sebagai berikut di CSS Anda:

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

  • Jika Anda menggunakan IE8, apakah Anda menggunakan Shim HTML5?

  • Jika ini tidak berhasil, ada Ide Pemecahan Masalah lebih lanjut di Font Awesome Wiki.

— mxro
sumber
3
Saya akan menambahkan: Periksa .htaccess Anda tidak memblokir ekstensi ttf, svg, eot, atau woff
— BassMHL
penggantian font! Tidak banyak jawaban yang menyebutkan yang satu ini. Saya telah memeriksa dan memeriksa dan memeriksa dan akhirnya menemukan jawabannya. Saya pernah mengalami masalah ini di masa lalu juga, dan tidak tahu mengapa, tapi sekarang saya tahu.
— adrianmc
1
Saya melewatkan untuk menambahkan single fasebagai nama kelas dulu. Terima kasih. Jawaban sempurna untuk menemukan masalah langkah demi langkah.
— Kai Noack
Bagi saya itu adalah hal lain yang mengatur font-family
— levininja
Bagi saya, saya memiliki "font-weight: 500" (agar sesuai dengan tema yang saya gunakan). Saya harus menyetelnya ke "font-weight: bold"
— bowlerae
24

Pada awalnya saya tidak bisa mendapatkan ini untuk bekerja dengan Font Awesome 5 :

<i class="fa fa-sort-down"></i>

Itu sebabnya saya datang ke sini, karena tidak terbiasa dengan font yang mengagumkan. Jadi ketika saya melihat lebih jauh, saya menyadari bahwa masalah saya hanyalah masalah dengan versinya.

w3schools membantu saya dalam kasus ini.

Baru di Font Awesome 5 adalah fasawalan, Font Awesome 4 menggunakan fa.

S in fasberarti solid , dan beberapa ikon juga memiliki mode reguler , ditentukan dengan menggunakan awalan far.

Saya sudah memperhatikan file yang berbeda di folder css FontAwesome, seperti:

  • all.min.css
  • brands.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

Dan saat itulah saya menyadari kesalahan saya. Yang harus saya lakukan adalah memasukkan css yang sesuai ke html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Dan kemudian rujuk item yang benar:

<i class="fas fa-sort-down"></i>

Pengaturan ini bekerja untuk saya. Padahal tidak semua item memiliki padanan di setiap jenisnya. Ini tidak akan berhasil:

<i class="far fa-sort-down"></i>

Sebagai catatan tambahan, ketika Anda tidak ingin mereferensikan semua file terpisah maka ini sudah cukup:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
sumber
Selain itu, lembar contekan menunjukkan item mana yang tersedia untuk setiap jenis ikon.
— Ruard van Elburg
12

Milik saya tidak berfungsi karena saya ingin ikon yang tidak dirilis dalam versi FA yang saya gunakan.

Ini menjawab mengapa beberapa ikon muncul tetapi yang lain tidak.

Cukup jelas tapi saya rasa beberapa orang masih jatuh cinta dengan ini. Seperti saya.

— Taiguara Andrade
sumber
4
Ya, itu memang memberikan jawaban atas pertanyaan itu.
— Bobort
2
Atau Anda mencoba menggunakan font lama yang sudah tidak ada lagi dalam versi yang Anda gunakan. Yang ini, misalnya, hanya disebut times-circle bukan times-circle-o yang merupakan nama lama: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Terima kasih!! Hal ini membuat saya menarik rambut saya sepanjang hari
— 24x7
5

Anda harus menggunakan https untuk maxcdn.bootstrapcdn.com. Hanya https di maxcdn yang mendukung CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Chatchawan Wongsiriprasert
sumber
4

Saya memecahkan masalah ini dengan meletakkan direktori Fonts pada level yang sama dengan file CSS saya.

— lolo
sumber
3

Untuk siapa pun yang mungkin memeriksanya pada tahun 2018. Saya menggunakan font yang luar biasa 4.7.0 dan saya mendapatkan masalah ini diselesaikan dengan hanya mengambil smasuk fasseperti yang terlihat pada kode <i class="fa fa-[icon-name]"></i>. Ini awalnya <i class="fas fa-[icon-name]"></i>.

Semoga ini membantu.

— Goodluck Leo
sumber
Ditambah saya menjalankan server node.js.
— Goodluck Leo
Baru di Font Awesome 5 adalah awalan fas, Font Awesome 4 menggunakan fa. Dari w3schools
— Ruard van Elburg
2

Hanya menambahkan beberapa info lagi ke jawaban di atas sehubungan dengan pembaruan pada fontawesome,

Jika Anda menggunakan font awesome 5,

Sebuah. cukup salin untuk menempelkan HTML di bawah ini,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Catatan: Lebih baik menyertakan semua skrip Anda dalam <body> {YOUR_SCRIPT_HERE}</body>dan tepat sebelum (YOUR_CLOSING_BODY)

b. Dan misalnya,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
sumber
Bagaimana jika menyajikan css secara lokal daripada menautkan ke situs web fa?
— Ghilteras
ini kasus saya ... saya tidak memiliki file js, sekarang berhasil!
— Cristian Sepulveda
2

menambahkan ini berhasil untuk saya:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

Lihatlah

jadi contoh lengkapnya adalah:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Luaskan cuplikan

— edgarmtze.dll
sumber
2

Jika Anda mendefinisikan CSS khusus, Anda harus mengatur font-weight: 900;untuk beberapa pustaka Font Awesome yang lebih baru (dari versi 5). Tidak menyetel font-weight ini mungkin menampilkan kotak.

— jurev
sumber
2

Catatan

Jawaban ini dibuat ketika versi terbaru fontawesome adalah v5. * Tetapi versi benang dan npm mengarah ke v4. * (21.06.2019). Dengan kata lain, versi yang diinstal melalui manajer paket berada di belakang rilis terbaru!

Jika Anda menginstal font-awesomemelalui manajer paket ( yarn atau npm ), harap perhatikan versi mana yang diinstal. Atau, jika Anda sudah font-awesomelama menginstal , periksa versi apa yang diinstal.

Menginstal font-awesome sebagai dependensi baru:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Memeriksa versi font-awesome yang sudah diinstal:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Masalah

Setelah Anda menginstal font-awesomedependensi, Anda menggabungkan salah satu dari dua file sumber ini font-awesome.cssatau font-awesome.min.css(didirikan di node_modules/font-awesome/css/) ke dalam header halaman web Anda misalnya

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

Selanjutnya, Anda mengunjungi https://fontawesome.com/ . Anda memilih ikon gratis dan Anda mencari masuk icon (sebagai contoh). Anda menyalin ikon misalnya <i class="fas fa-sign-in-alt"></i>, Anda menempelkannya ke html Anda dan, ikon tidak ditampilkan, atau ditampilkan sebagai persegi atau persegi panjang!

Larutan

Intinya, versi yang diinstal melalui pengelola paket berada di belakang versi yang ditampilkan di situs web https://fontawesome.com/ . Seperti yang Anda lihat, kami menginstal font-awesome v4.7.0, tetapi situs web menunjukkan dokumentasi untuk font-awesome v5.*. Solusi, kunjungi situs web yang mendokumentasikan ikon untuk v4.7.0 https://fontawesome.com/v4.7.0 , menyalin ikon yang sesuai misalnya <i class="fa fa-sign-in" aria-hidden="true"></i>dan memasukkannya ke dalam html Anda.

— Lukasz Dynowski
sumber
Mereka telah merilis paket baru di sini yang memiliki versi terbaru. Ini juga kompatibel dengan less dan sass \ o /
— DerpyNerd
2

Untuk versi 5:

Jika Anda mengunduh paket gratis dari situs ini:

https://fontawesome.com/download

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

Jadi referensi Anda akan terlihat seperti ini:

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

File fontawesome.css tidak menyertakan referensi font.

— cinta hidup
sumber
1

Jika Anda menggunakan hosting blogger, gunakan url stylesheet css ini:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM.
sumber
1

Coba dua link di bawah ini tetap di tag header.

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

Dapatkan Ikon dari tautan di bawah ini:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— ceri
sumber
1

Saya menggunakan:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

dan gaya setelah:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— Tran Anh Hien
sumber
1

tautan CDN yang telah Anda posting saya kira itu sebabnya tidak ditampilkan dengan benar, Anda dapat menggunakan yang ini di bawah ini, ini berfungsi dengan sempurna untuk saya.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Luaskan cuplikan

— John Kesh Mahugu
sumber
1

Saya bisa mendapatkan Font Awesome untuk bekerja dengan menggunakan file all.min.css.

— Rob Breidecker
sumber
0

Pastikan Anda menyertakan rel dan ketik seperti dalam "rel =" stylesheet "type = 'text / css'" di tautan ke file css awesomefont. Tanpa ini, file tidak dimuat dengan benar untuk saya.

— Elliot Robert
sumber
0

Anda dapat menambahkan ini dalam file .htaccess di direktori font yang mengagumkan

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Waleed Hakim
sumber
0

Saya telah menguji dan berhasil.

Bukan ini

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

Gunakan dengan HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atif Tariq
sumber
-1

Anda membutuhkan importir font. | mencoba

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
sumber
-2

Saya mendapatkan milik saya untuk bekerja dengan mengedit file font-awesome.css utama. Ini memiliki url ke src (woff, eot, dll ...) Saya harus mengubahnya ke jalur absolut misalnya: http://mywebsite.com/font-awesome.woff Kemudian berhasil!

— crystallove18
sumber
2
Saya lebih suka tidak merekomendasikan ini karena Anda sedang mengedit file eksternal. Anda (atau tim Anda) perlu mengingat ini setiap kali mereka perlu memperbarui fontawesome.
— J Cordero
-6

Ubah ini:

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

Untuk ini:

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

Saya yakin Anda memerlukan yang http:sebaliknya, ia tidak tahu protokol apa yang akan digunakan (dan menggunakan yang salah, file:misalnya, sebagai akibatnya).

— Shahar
sumber
@ user3870894 Sebenarnya href, saya sedang memikirkan javascript. Tapi coba kode baru.
— Shahar
@ user3870894 o_o Posting HTML lengkap atau setidaknya bagian utama. Apa kata konsol? Apakah Anda mencoba memeriksa elemen?
— Shahar
2
@Shahar Dengan menggunakan //browser memilih protokol yang digunakan situs yang meminta. Saat situs Anda menggunakan https, ia mengambil https. Jika Anda menggunakan http, ini menggunakan http untuk meminta file dari CDN. Tentu saja, jika Anda membuka situs secara lokal menggunakan file:///, yang tidak disarankan, browser memang akan mencoba membuka cdn dengan fileprotokol.
— Robin van Baalen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.