Phông chữ tuyệt vời không hiển thị biểu tượng

99

Tôi đang sử dụng Font Awesome và không muốn thêm CSS bằng HTTP. Tôi đã tải xuống Font Awesome và đưa nó vào mã của mình, nhưng Font Awesome đang hiển thị một hộp hình vuông có viền thay vì một biểu tượng. Đây là mã của tôi:

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

Tôi muốn biết cách hiển thị biểu tượng thay vì ô vuông có viền.

html css font-awesome

— Ganesh H
nguồn

5

Điều này đã được hỏi nhiều lần trước đây. Đảm bảo rằng bạn cũng đang bao gồm các tệp phông chữ .. không chỉ CSS stackoverflow.com/questions/14366158/…

— Zim

đây là liên kết để hướng dẫn tourbleshooting font-tuyệt vời trong git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

— Mehavel

vui lòng cập nhật câu hỏi với cấu trúc thư mục của bạn, trong đó bạn có thư mục font-awesome, Vì vậy, chúng tôi có thể xác định rằng "font-awesome.min.css" có nhận được đường dẫn ttf một cách chính xác hay không. Chỉ css sẽ không hoạt động.

— Ajit Hogade

stackoverflow.com/a/42355738/397872

— rishta

84

Trong trường hợp của tôi, tôi đã mắc lỗi sau trong mã css của mình.

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

Điều này sẽ ghi đè tất cả các quy tắc họ phông chữ cho toàn bộ trang. Giải pháp của tôi là chuyển mã sang nội dung như vậy.

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

NB: Bất cứ khi nào bạn sử dụng !importantcờ trong css, bất kỳ quy tắc css nào khác được khai báo cùng loại trên cùng một phần tử sẽ bị ghi đè.

— Daniel Barde
nguồn

4

Đây là giải pháp cho tôi. Tôi có *{font-family: Raleway}và tôi đã thay đổi nó để*.not(i) {font-family: Raleway}

— fungusanthrax

Tôi cũng gặp sự cố này, nhưng tôi không nhận ra nó trong nhiều thời gian vì trong DevTools, nó thực sự giống như FontAwesome đang được sử dụng. Xem câu trả lời của tôi để biết thêm chi tiết.

— Dagmar

59

Khi bạn mở, font-awesome.min.cssbạn có thể thấy đường dẫn sau:

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

Nó có nghĩa là bạn phải tạo thư mục Fontsvà sau đó sao chép tệp fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) vào thư mục này. Sau đó mọi thứ sẽ hoạt động tốt.

— người dùng2980426
nguồn

Vì ít nhất 0.8.1 font-awesome không được tham chiếu. Có ba summernotetập tin trong thư mục font chữ với phần mở rộng eot, ttfvà woffrằng cần phải được phân phối.

— ficuscr

2

Hãy cẩn thận, trong 4.6.3 (nếu không phải sớm hơn), nó fontskhông phải Fontsvà trên một hệ thống phân biệt chữ hoa chữ thường gây ra sự cố ...

— Jason

1

tại sao phông chữ tuyệt vời không nói điều đó trên trang web của họ? nó thực sự không rõ ràng.

— Matt,

Tuyệt vời! Tôi nghĩ rằng các phông chữ phải nằm trong cùng một thư mục với css, chúng phải được nâng cấp một thư mục.

— Giovani Vercauteren,

Ngoài ra, hãy đảm bảo rằng thư viện của bạn được cập nhật. Tôi đã có tất cả các logo của mình ngoại trừ logo bandcamp. Sau khi tôi tải xuống bản 4.7 đã cập nhật và thay thế các tệp, nó đã hoạt động.

— Ryan Walker

45

Lưu ý rằng phiên bản mới (5) của phông chữ sử dụng tuyệt vời "fas"hoặc "fab"thay vì "fa"tiền tố.

Trích dẫn từ trang web của họ:

Tiền tố fa đã không còn được dùng trong phiên bản 5. Giá trị mặc định mới là kiểu đặc F và kiểu fab dành cho thương hiệu.

Đây là lý do tại sao các phông chữ của tôi hiển thị các ô vuông trống. Hiện đã được sửa.

Mã ví dụ:

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

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

— krystonen
nguồn

Điều đó đã làm nó cho tôi! Lạ mà nó chưa được cập nhật trong tài liệu

— GroomedGorilla

Đây là điều duy nhất hoạt động. Nếu bạn đang sử dụng phiên bản hiện đại, hãy sử dụng cái này.

— samurdhilbk

LƯU TRỰC TIẾP! đổi thành "fa fa-bar" borked

— nasty

Cảm ơn bạn, đối với tôi một số biểu tượng wirk với fas và những biểu tượng khác với fab, ví dụ fab fa-twitter thì tốt nhưng fas fa-twitter hiển thị một hình vuông màu trắng, hãy xem!

— user1620090

Vì vậy, nếu phiên bản mới là Fas, thì tại sao tôi cần thay đổi các lớp học của mình từ 'fas' thành 'fa'

— Sam

22

Trước tiên, hãy kiểm tra xem bạn có class = "fa" cũng như bất kỳ lớp của biểu tượng nào không. Vì vậy, không chỉ

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

Nhưng cũng

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

Sau đó, nó hoạt động như mong đợi. Điều này đã giải quyết vấn đề của tôi.

— OneMoreQuestion
nguồn

1

Điều này đã làm việc cho tôi. Đối với tôi fab fa-phong bì không hoạt động, nhưng rồi fa fa-phong bì lại hoạt động. Rất lạ nhưng đã khắc phục được sự cố của tôi.

— Jordan Schuetz

@JordanSchuetz "fab" dành riêng cho các biểu tượng thương hiệu, như "fab fa-facebook-f". Trong các phiên bản mới hơn, bạn sẽ tìm thấy "fas" cho biến thể "solid", do đó, của bạn sẽ được sửa thành "fas fa-phong bì" trong các phiên bản mới hơn hoặc "fa fa-phong bì" trong phiên bản cũ hơn.

— Tessa

20

Mở mã font-awesome.css của bạn như:

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

bạn phải có thư mục như:

font awesome -> css
 -> fonts

hoặc cách dễ nhất:

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

— Erga Kandly
nguồn

11

Kiểm tra xem đường dẫn đến CSStệp của bạn có đúng không. Thay vì thích các liên kết tuyệt đối, chúng dễ hiểu hơn vì chúng ta biết mình bắt đầu từ đâu và các công cụ tìm kiếm cũng sẽ thích chúng hơn các liên kết tương đối. Và để giảm băng thông thay vì sử dụng liên kết từ các máy chủ có phông chữ tuyệt vời:

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

Hơn nữa, nếu bạn sử dụng nó, bạn sẽ không cần phải tải thêm phông chữ lên máy chủ của mình và bạn sẽ chắc chắn rằng mình trỏ đến đúng CSStệp và bạn cũng sẽ được hưởng lợi từ các bản cập nhật mới nhất ngay lập tức.

— Valentin Mercier
nguồn

10

Tôi đã làm cùng và vẫn có hộp vuông chỉ

— Vipul Hadiya

5

tôi đã đối phó với cùng một vấn đề sau đó tôi đã tìm ra rằng tôi phải sử dụng phiên bản mới (5 và cộng thêm)

sử dụng cdn này nó sẽ hoạt động.

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

— Halid
nguồn

4

Để bắt đầu, bạn không nên có cả hai font-awesome.css và font-awesome.min.css

Nói chung, sử dụng font-awesome.csstrong quá trình phát triển, sau đó chuyển sangfont-awesome.min.css khi bạn hài lòng với trang web.

Các vấn đề như thế này thường do các đường dẫn và vị trí tương đối gây ra, vì vậy hãy kiểm tra xem tệp html của bạn đang ở đâu trong mối quan hệ với css.

Nếu tệp html của bạn nằm trong thư mục cơ sở và css trong thư mục con ngoài thư mục gốc, bạn sẽ cần: href="./css/font-awesome.css"(dấu chấm đơn)

— paul
nguồn

4

Tất cả những điều trên đều đúng, tuy nhiên trên hết vấn đề của tôi là tôi đã tải xuống phiên bản FA5 miễn phí không có:

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

Tôi không thể làm cho v5 hoạt động vì vậy tôi đã hoàn nguyên về 4.7.0 với sự trợ giúp của các bài đăng ở trên và nó đã khắc phục sự cố của tôi.

— Mickers
nguồn

1

Tôi cũng gặp sự cố khi làm việc với v5 + của FontAwesome. Đã thay đổi thư mục "webfonts" của họ thành "phông chữ" trong css và đặt nó theo cách tương tự, và nó không hoạt động bình thường. Các tệp đã được thay thế bằng v4.7.0 và nó hoạt động như một sự quyến rũ. Hrm.

— Lisa Cerilli

1

Trong phiên bản 5, họ phông chữ cho các biểu tượng không còn là "FontAwesome" nữa. Trong phiên bản miễn phí, bây giờ là "Font Awesome 5 Free" và "Font Awesome 5 Pro" trong phiên bản chuyên nghiệp. Tôi đã gặp sự cố này khi tôi đang sử dụng thủ công các mã ký tự ở một số nơi và chúng ngừng hoạt động do chưa đặt họ phông chữ.

— Tessa

4

tôi đã gặp phải vấn đề tương tự .. vì vậy thay vì tải xuống phông chữ tuyệt vời, tôi đã thêm một liên kết vào mã html của mình và nó hoạt động.

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

Mở rộng đoạn mã

— Hrithik verma
nguồn

Cảm ơn bạn rất nhiều, tôi dành 24 giờ để sửa phông chữ này

— Mathew Magante

2

Tôi đã cài đặt thành công Font Awesome bằng cách sử dụng CDN và javascript bao gồm (như được mô tả trên trang này ). Sau đó, tôi cố gắng sao chép HTML và CSS vào một số trang kế thừa và đột nhiên tôi thấy các hộp vuông trống thay vì các biểu tượng.

Tôi đã thấy câu trả lời của Daniel (ở trên) và vì tệp CSS kế thừa của tôi rất lớn (và lâu đời) nên tôi nghi ngờ đó là vấn đề. Tuy nhiên, khi tôi xem trong Chrome DevTools, nó thực sự giống như Font Awesome đã được tải:

Tôi đã mong đợi thấy phông chữ bị gạch ngang nếu có vấn đề ... Tuy nhiên, tôi đã thực sự hết các tùy chọn của mình nên tôi đã kiểm tra Kiểu tính toán và thấy rõ ràng rằng phông chữ Font Awesome chắc chắn không được sử dụng. (Xem phông chữ được kết xuất ở dưới cùng)

Tệp CSS kế thừa của tôi là một mớ hỗn độn và tôi không muốn chạm vào nó, vì vậy tôi đã lừa dối bằng cách làm này - vui lòng không nói với bất kỳ ai :)

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

Cũng cần lưu ý, khi tôi nâng cấp từ phiên bản Font Awesome 4.7.0 lên phiên bản 5.4.1, vấn đề này đã biến mất! Tôi đã sử dụng hướng dẫn thiết lập này và HTML này

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

— Dagmar
nguồn

2

Đối với những người bạn sử dụng SCSS và gói NPM, đây là giải pháp của tôi:

npm i --save @fortawesome/fontawesome-free

Sau đó, ở đầu tệp SCSS (lý tưởng là tệp SCSS được nhập ở gốc ứng dụng của bạn):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

— Jeff Diederiks
nguồn

Việc thêm thú vị đã @fortawesome/fontawesome-free/css/all.csssửa nó

— Andy Braham

1

Trong trường hợp của tôi: Bạn cần sao chép toàn bộ thư mục font-awesome vào thư mục css của dự án chứ không chỉ tệp font-awesome.min.css .

— sst
nguồn

1

Vì vậy, có vẻ như việc thêm style='font-weight:normal;'hoặc thay đổi phông chữ trực tiếp trên phần tử sẽ ghi đè .fas{font-weight:900}định nghĩa trong tệp CSS của Font Awesome. Tôi đoán rằng phông chữ có các định nghĩa cụ thể trong tệp phông chữ mà nó hoạt động. Có vẻ như font-weightphải được đặt trong khoảng từ 501 đến 1000, hoặc phông chữ có thể trông giống như một khối vuông.

— James Wilkins
nguồn

1

vấn đề của tôi là vấn đề có nhiều phiếu bầu nhất

*{
font-family: xxxxx
}

thay đổi nó thành điều này đã giải quyết được vấn đề

body{
font-family: xxxx
}

— Jamsheer
nguồn

0

Bạn có thể đã sử dụng VCS (git hoặc somesuch) để chuyển các tệp biểu tượng đến máy chủ. git nói:

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.

Bạn có thể phải sửa các phông chữ của mình.

— rishta
nguồn

0

Tôi nghĩ rằng bạn không có thư mục phông chữ trong thư mục gốc của bạn như thư mục css ở đâu.

Bản giới thiệu

Và thư mục css giống như

Và thư mục phông chữ như

Tôi hy vọng nó sẽ làm việc cho bạn.

Cảm ơn bạn.

— Obaidul Haque
nguồn

0

Trên MacOS Mojave, tôi gặp sự cố này trong Safari. Những hình ảnh tuyệt đẹp về phông chữ hoạt động trong Chrome nhưng không hoạt động trong Safari, vì vậy tôi chắc chắn rằng đó không phải là trang web.

Tôi yêu cầu chúng hiển thị bằng cách đi tới Tùy chọn trong menu Safari và tắt / bỏ chọn "Ngăn theo dõi trang web chéo" trong tab Bảo mật.

Không chắc tại sao điều này đã sửa nó, nhưng nó đã làm được.

— Michael Shulman
nguồn

0

Dựa trên phiên bản 5.10.1.

Giải pháp của tôi (cục bộ):

Nếu bạn đang sử dụng "fontawesome.css" hoặc "fontawesome.min.css", hãy thử sử dụng "all.css" (nằm trong thư mục css).
Thư mục "css" và thư mục "webfonts" từ gói fontawesome mà bạn đã tải xuống phải ở cùng cấp với nhau.

Trong trường hợp của tôi, tôi đã có một thư mục css nên tôi chỉ cần đổi tên thư mục fontawesome css thành "css-fa".

Với cả "css-fa" và "webfonts" trong thư mục css của tôi, chỉ cần liên kết chính xác nó trong trình soạn thảo văn bản của bạn và nó sẽ hoạt động.

Ví dụ: liên kết rel = "stylesheet" href = "css / css-fa / all.css"

— Tou Toua Yang
nguồn

0

đã giải quyết việc thay đổi bộ chọn font-family được nhắm mục tiêu! importantized font-family từ * { ... } thành *:not(i) { ... }

(với bộ tiền xử lý scss); hy vọng bạn đã giải quyết

— backciro
nguồn

0

Đoạn mã dưới đây là font-awesome 4.70.0. Để chuyển đến font-awesome 5.11.2, hãy nhấp vào đây .

<!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
nguồn

0

Tôi đang sử dụng FontAwesome Pro và giải pháp cho tôi là nhúng all.min.cssthay vì nhúng fontawesome.min.css.

— Bruno Leveque
nguồn

0

Tôi đã làm theo hướng dẫn này để tự mình lưu trữ Font Awesome Pro 5.13.

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

Vì một số lý do mà tôi không thể <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">tải webfonts, dẫn đến chỉ có các ô vuông hiển thị. Nhưng khi tôi sử dụng <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>mọi thứ bắt đầu hoạt động. Cả hai liên kết đã được thêm vào trong HTML <head>.

— Ogglas
nguồn

vấn đề với js này là tệp phải tải nặng

— exequielc

0

Tôi đã cố gắng thêm fa 5.0.13 vào drupal 8 với scss. Theo mặc định, các kiểu không được bao gồm trong fa.scss chính mà phải thêm chúng theo cách thủ công.

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

— bonkisama
nguồn

0

bạn cần đặt tệp phông chữ tuyệt vời vào thư mục css và thay đổi

href = "../ css / font-awesome.css" thành href = "css / font-awesome.css"

Một điều nữa Bạn có thể Thay thế Tệp css Phông chữ tuyệt vời này Và và thử cái này

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

Mở rộng đoạn mã

— sani
nguồn

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>

Mở rộng đoạn mã

— De Zin Htang
nguồn

Làm việc rất tốt với điều này

— 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
nguồn

-1

Hãy coi chừng Bootstrap! Bootstrap sẽ ghi đè các lớp .fa. Nếu bạn đang đưa cả hai gói vào một cách riêng biệt với suy nghĩ "Tôi sẽ sử dụng Bootstrap để xử lý khối đáp ứng và Font-Awesome cho các biểu tượng", bạn cần giải quyết các lớp .fa bên trong Bootstrap để chúng không ảnh hưởng đến giá đỡ của Font-Awesome- thực hiện một mình.

ví dụ: font-family 'FontAwesome' trong Bootstrap sẽ can thiệp vào font-family 'Font Awesome 5 Free' trong Font-Awesome và bạn sẽ nhận được một hộp màu trắng thay vì biểu tượng bạn muốn.

Có thể có nhiều cách khác để xử lý vấn đề này, nhưng nếu bạn đã xem danh sách kiểm tra đang cố gắng khắc phục sự cố "hộp trắng" mà vẫn không thể tìm ra nó (như tôi đã làm), đây có thể là câu trả lời mà bạn đang tìm kiếm cho.

— jtubre
nguồn

Tại sao bỏ phiếu xuống? Đó là trường hợp phức tạp, nhưng nó là một nguyên nhân không dễ tìm thấy ở nơi khác.

— jtubre

-1

Trong trường hợp của tôi, vấn đề là do sử dụng một số kiểu thông thường ( far) không có trong bộ miễn phí. Thay đổi để fassửa nó.

— Yngve Høiseth
nguồn