Phông chữ hiển thị dấu hiệu Châu Á tuyệt vời thay vì biểu tượng

Question

Tôi đang cố gắng sử dụng Phông chữ tuyệt vời nhưng thay vì bất kỳ biểu tượng nào, nó chỉ hiển thị bất kỳ dấu hiệu Châu Á nào. Tôi đã tải font chữ về máy chủ web. Tôi đã thử điều này trong 3 trình duyệt khác nhau (firefox, opera và chromium) nhưng nó luôn giống nhau.

Một testpage có thể được nhìn thấy ở đây: http://2weitweitweg.de/test.html

Và đây là một ảnh chụp màn hình của nó: http://postimg.org/image/9yh5p0p97/

Liệu nó hiển thị các dấu hiệu trong trình duyệt của bạn? Vấn đề trình duyệt hoặc máy chủ có liên quan? Làm thế nào tôi có thể sửa chữa nó?

tạm biệt

Answer 1

giống như tôi cũng vậy, công trình font-tuyệt vời trên các trình duyệt máy tính của tôi [tất cả trong số họ], nhưng sau đó tôi đã kiểm tra font-tuyệt vời trên trình duyệt java mobile opera [trình duyệt opera mới nhất cho java điện thoại di động (c2-03 chính xác)] tôi chỉ thấy dấu hiệu/ký tự/ký hiệu Châu Á, đôi khi tôi thấy các hộp, thay vì các ký hiệu chữ tuyệt vời. tôi hy vọng điều này sẽ được giải quyết?

Answer 2

Rất có thể các tệp phông chữ thực tế không được tìm thấy. Nếu bạn nhìn vào font tuyệt vời file CSS có thể bạn sẽ thấy một cái gì đó như:.

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
    [...etc] 

này hy vọng sẽ tìm thấy các tập tin phông chữ trong một thư mục có tên phông chữ cùng cấp rằng file CSS là trong Ví dụ:

myproject/css 
       /font-awesome.css 
        [...etc] 
     /font 
       /fontawesome-webfont.eot 
        [...etc] 

Nếu tệp ở đúng vị trí, có thể chúng không được tải vì một số vấn đề với quyền hoặc thậm chí bạn đang sử dụng trình duyệt lạ không hỗ trợ đúng cách @ phông chữ. Tất nhiên bạn có thể loại bỏ cái sau bằng cách duyệt đến font awesome examples page để xem nó có hiển thị đúng biểu tượng hay không.

Answer 3

Tôi gặp sự cố này và đó là vì tôi đã sử dụng html cũ với phiên bản fontawesome mới.

tôi cố định nó bằng cách thay đổi:

<i class="fa-bitbucket"></i> 

tới:

<i class="fa fa-bitbucket"></i> 

Tức là Tôi chỉ cần thêm lớp mặc định fa vào phần tử.

Phiên bản mới nhất sử dụng tiền tố fa nhưng cho bạn, tôi đoán nó có thể là icon thay thế.

Hy vọng điều này sẽ giúp ai đó ở một số giai đoạn :-)

Answer 4

Nếu bạn sử dụng 4.0 hay muộn, họ đã thay đổi icon lớp học để fa lớp Vì vậy, mã của bạn nên nói

<i class="fa fa-camera-retro fa-large"></i> 

thay vì

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

Bạn có thể tìm thấy biểu tượng, ví dụ mã cụ thể bằng cách truy cập http://fontawesome.io/icons/ và nhấp vào/khai thác biểu tượng bạn cần.

Tôi có vấn đề này tương tự khi nâng cấp từ 3.2 đến 4.0.3

Answer 5

Hope Tôi không quá muộn, một cái gì đó trên máy chủ của bạn không được cấu hình đúng cách, giải pháp là cho phép * .woff và * .tff được yêu cầu như các tài nguyên tĩnh giống như bạn làm với * .css và .js *, điều này được thực hiện khác nhau tùy thuộc vào nền tảng:

Những gì tôi đã làm để làm cho nó hoạt:

thay thế của bạn biểu định kiểu với (vì chúng tôi không thể g et để nguồn lực):

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> 

Và thay thế cũ lớp * icon- của bạn, ví dụ:

<i class="fa-umbrella fa text-error"></i> 

Và bây giờ nó hoạt động: