Phông chữ Tuyệt vời không hoạt động, các biểu tượng hiển thị dưới dạng hình vuông


224

Vì vậy, tôi đang cố gắng tạo nguyên mẫu cho một trang tiếp thị và tôi đang sử dụng Bootstrap và tệp Font Awesome mới. Vấn đề là khi tôi cố gắng sử dụng một biểu tượng, tất cả những gì được hiển thị trên trang là một hình vuông lớn.

Đây là cách tôi bao gồm các tệp trong đầu:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

Và đây là một ví dụ về tôi đang cố gắng sử dụng một biểu tượng:

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

Nhưng tất cả những gì được đưa ra trong một hình vuông lớn. Có ai biết những gì có thể xảy ra?


1
Bạn đang nhập phông chữ?
mayhewr

1
Chắc là không. Tôi nghĩ bạn chỉ phải bao gồm các .csstập tin.
Connor Black

2
Tiêu đề ngụ ý rằng vấn đề là dành riêng cho Chrome. Có phải nó đang tải trong các trình duyệt khác hoặc là tệp phông chữ được tham chiếu bật lên 404?
cimmanon

1
Không thể tìm thấy bước 3 trên liên kết trên kể từ tháng 8 năm 2016 ... Bất kỳ chuyển hướng nào ??
Saurabh Tiwari

1
Có lẽ bạn quên sao chép thư mục webfont?
entithat

Câu trả lời:


149

Theo tài liệu (bước 3), bạn cần sửa đổi tệp CSS được cung cấp để trỏ đến vị trí phông chữ trên trang web của bạn.


5
Câu trả lời tuyệt vời, chỉ cần cung cấp một số thông tin bổ sung, bạn cũng có thể đặt phông chữ vào đường dẫn mặc định do css cung cấp, chỉ cần mở Font-awesome.css và bạn sẽ tìm thấy mục sau: @ font-face {font-family: 'FontAwgie'; src: url ('../ font / fontawgie-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawgie-webfont.eot? # iefix & v = 3.2.1')
Braulio

1
Chỉ dành cho các trình đọc ASP.NET MVC trong tương lai có cùng một vấn đề: Nếu bạn có tất cả các thư mục ở đúng vị trí, hãy xác minh xem bạn đã thêm loại MIME trên tệp web.config như được chỉ ra ở đây: stackoverflow.com/questions/4015816/.
jpgrassi

1
Nếu bạn sử dụng Lược đồ URI dữ liệu với phiên bản cơ sở của phông chữ64 (có thể dễ dàng chuyển đổi trực tuyến), thì bạn không phải lo lắng về đường dẫn tệp và lưu trữ tài nguyên phù hợp.
RenaissanceProgrammer

Lưu ý : nếu bạn không muốn sửa đổi css, chỉ cần đặt css và phông chữ vào cùng một thư mục, kiểm tra điều này
shaijut

7
@tutuca: Không phải ai cũng có thể sử dụng CDN.
Các cuộc đua nhẹ nhàng trong quỹ đạo

188

Bạn phải có 2 lớp, các falớp và lớp danh sách chỉ rõ biểu tượng mong muốn fa-twitter, fa-search, vv ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

4
Đây phải là câu trả lời hàng đầu, CSS cung cấp các điểm đến đúng vị trí cho các tệp phông chữ miễn là bạn không di chuyển chúng - điều này đã đẩy tôi lên tường cảm ơn bạn
alex3410

5
Lưu ý: "Tiền tố fa đã không được dùng trong phiên bản 5. Mặc định mới là kiểu fas solid và kiểu fab cho các thương hiệu."
Terje Solem

1
CÁi này đã sửa nó giúp tôi! Tôi đang sử dụng Angular (5 tôi nghĩ) cùng với Primeng và có vẻ như, font-awesome đã hoạt động với các định nghĩa MenuItem bên trong xx.component.ts (các biểu tượng được hiển thị chính xác). Tuy nhiên: khi thêm một cái gì đó vào xx.component.html (ví dụ: nút p có biểu tượng), người ta phải thêm lớp fa fa- <biểu tượng gì>!
Igor

1
@TerjeSolem thông tin bạn cung cấp là rất quan trọng. Nó giải quyết vấn đề của tôi. như tôi đang sử dụng phiên bản cũ hơn nhưng đang sử dụng "fas" cảm ơn
MindRoasterMir

Cảm ơn rất nhiều! Tôi đã nhận được điều tương tự với các biểu tượng mở oi oi -... Mất oi đầu tiên.
Alexandr

54

Dùng cái này

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

Tôi gặp vấn đề tương tự với Amazon Cloudfront CDN nhưng nó đã được giải quyết sau khi tôi bắt đầu tải nó từ maxcdn


6
điều này giả định rằng bạn muốn sử dụng CDN tuyệt vời. Đối với một môi trường sản xuất thương mại tôi sẽ không làm điều này.
Jay Edwards

48

Điều này có thể giúp, kiểm tra để đảm bảo rằng bạn đã vô tình thay đổi họ phông chữ trên biểu tượng. Nếu bạn đã thay đổi họ phông chữ của mục .fa từ: FontAwgie biểu tượng sẽ không hiển thị. Nó luôn luôn là một cái gì đó ngớ ngẩn và nhỏ bé.

Hy vọng rằng sẽ giúp được ai đó.


11
CHƠI LÔ TÔ! Cám ơn rất nhiều. Metro-UI đã ghi đè lên họ phông chữ tuyệt vời. Tôi đã phải thêm cái này: .fa {font-family: 'FontAwgie'! Quan trọng; } sau đó nó hoạt động.
Debbie A

1
Vâng. Ngớ ngẩn và nhỏ bé. Điều này - thay đổi phông chữ cho một cái gì đó khác và ảnh hưởng đến các biểu tượng fontawgie - đã xảy ra với tôi rất nhiều lần đến nỗi nó trở nên ngu ngốc.
Edd

2
Có - dòng này là để đổ lỗi (cụ thể hơn, các quy tắc quan trọng!): * {Font-family: 'Nguồn Sans Pro' quan trọng}
Svet

1
Đây là mẹo quan trọng và hữu ích nhất về việc sử dụng Font Awesome để tránh mất thời gian tìm kiếm rắc rối.
Dez

22

Nếu bạn đang sử dụng LESS hoặc SASS, hãy mở tệp font-awesome.less / sass và chỉnh sửa biến đường dẫn @fa-font-path: "../font";trỏ đến phông chữ thực tế:

@fa-font-path: "../font";

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Tương tự với CSS, ngoại trừ bạn chỉnh sửa đường dẫn trong khối khai báo @ font-face:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Có cách nào để chỉ nhập một số biểu tượng nhất định thay vì tất cả chúng không? Tôi chỉ muốn biên dịch tập tin css của tôi thành một vài biểu tượng.
dùng805981

@fa-font-path: "../fonts";đã làm cho tôi. (Lưu ý sthêm thiếu )
prograhammer

18

Mở font-awesome.css có mã 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">

13

Tôi đã cố gắng giải quyết vấn đề tương tự với một vài giải pháp trước đây, nhưng chúng không hoạt động trong tình huống của tôi. Cuối cùng, tôi đã thêm 2 dòng này vào HEAD và nó hoạt động:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">   

12

tôi đang sử dụng Font Awesome 4.3.0chỉ liên kết từ maxcdn hoạt động như được đề cập ở đây ,

nhưng để lưu trữ trong máy chủ của bạn đặt phông chữ và css trong cùng một thư mục làm việc cho tôi, như thế này

nhập mô tả hình ảnh ở đây

sau đó chỉ cần liên kết css:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

hy vọng giúp được ai đó.


8

Bạn phải có 2 lớp, lớp fas và lớp fa, có thể điều này sẽ hoạt động:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>

3
Không nhận ra điều này - từ v5 giờ họ yêu cầu một lớp fabhoặc fasthay vì falớp.
Echilon

7

Tôi đã có vấn đề này. Vấn đề là tôi đã có một kiểu CSS họ phông chữ với! Quan trọng là ghi đè phông chữ fontawgie.


Tôi gặp vấn đề tương tự với * {font-family: Helvetica, sans-serif! Quan trọng; }
Dubbo

6

Trong trường hợp bạn đang làm việc với MavenApache Wicket, hãy kiểm tra các mục sau để cố gắng giải quyết vấn đề với Font-Awesome và các biểu tượng không được tải:

Nếu bạn đã đặt các tệp của mình chẳng hạn trong cấu trúc tệp sau

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Kiểm tra 1) Bạn có sử dụng chính xác Gói bảo vệ tài nguyên để cho phép tải các tệp phông chính xác không?

Ví dụ từ lớp của bạn mở rộng WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Kiểm tra 2) Sau khi bạn đã chắc chắn rằng tất cả các phông chữ được chuyển chính xác vào Trình duyệt web, hãy kiểm tra xem những gì đã thực sự được chuyển đến Trình duyệt web, tức là, tính toàn vẹn của các tệp phông có thay đổi không? So sánh các tệp trong thư mục nguồn của bạn và các tệp được chuyển đến Trình duyệt web bằng cách sử dụng, ví dụ: Thanh công cụ dành cho nhà phát triển web của Firefox và DiffDog (để so sánh tệp).

Đặc biệt nếu bạn đang sử dụng Maven, hãy lưu ý đến việc lọc tài nguyên. Không lọc thư mục chứa tệp / phông chữ của bạn - nếu không chúng sẽ bị hỏng.

Ví dụ từ tệp pom.xml của bạn

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

Trong ví dụ trên, chúng tôi không lọc thư mục src / main / java, nơi chứa các tệp css và phông chữ.

Để biết thêm thông tin về việc lọc dữ liệu nhị phân, vui lòng xem tài liệu:

http://maven.apache.org/plugins/maven-resource-plugin/examples/filter.html

Cụ thể, tài liệu cảnh báo: " Cảnh báo: Không lọc các tệp có nội dung nhị phân như hình ảnh! Điều này rất có thể dẫn đến đầu ra bị hỏng. Nếu bạn có cả tệp văn bản và tệp nhị phân làm tài nguyên, bạn cần khai báo hai bộ tài nguyên loại trừ lẫn nhau. Bộ tài nguyên đầu tiên xác định các tệp sẽ được lọc và bộ tài nguyên khác xác định các tệp để sao chép không thay đổi ... "


6

Tôi đã gặp vấn đề này và thực hiện từng bước một cách cẩn thận ... mặc dù tôi đã sử dụng FA từ lâu ... và sau đó tôi nhận ra mình có dòng này trong tệp css mail của mình:

* {
font-family: Arial !important;
}

Sai lầm ngớ ngẩn, nhưng điều này có thể tip cho ai đó trong tương lai!



4

Bạn phải trả lại tiêu đề Access-Control-Cho phép-Origin thành * cho các tệp phông chữ của bạn


2
Chính xác! Sử dụng các nhà cung cấp bên thứ ba để phục vụ phông chữ tuyệt vời của bạn không giải quyết được vấn đề của bạn, bạn chỉ cần chuyển nó cho người khác để được giải quyết.
Simana

4

Kể từ tháng 12 năm 2018, tôi thấy việc sử dụng phiên bản ổn định 4.7.0 được lưu trữ trên bootstrapcdn dễ dàng hơn thay vì cdxx 5.xx tuyệt vời trên trang web của họ - vì mỗi lần họ nâng cấp các phiên bản nhỏ, phiên bản trước sẽ bị hỏng.

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

Các biểu tượng giống nhau:

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


3

font-weight: 900;

Tôi gặp vấn đề khác với Font Awesome 5. Trọng lượng phông chữ mặc định phải là 900 đối với các biểu tượng FontAwgie nhưng tôi ghi đè lên 400 cho các thẻ span và i. Nó chỉ hoạt động, khi tôi sửa nó.

Dưới đây là tài liệu tham khảo về vấn đề trong trang Github của họ, https://github.com/FortAwgie/Font-Awgie/issues/11946

Tôi hy vọng nó sẽ giúp được ai đó.


1
cảm ơn bạn đó cũng là vấn đề của tôi Tôi đã đặt Font-Family thành "Font Awesome 5 Free" nhưng cũng cần trọng lượng phông chữ được đặt thành 900!
Hans Vonn

3

Nếu bạn đang sử dụng phiên bản 5. * trở lên, thì bạn phải sử dụng

all.css hoặc all.min.css

Bao gồm các fontawgie.css không hoạt động vì nó không có tham chiếu đến thư mục webfonts và không có tham chiếu đến @ font-face hoặc font-family

Bạn có thể kiểm tra điều này bằng cách tìm kiếm mã cho thuộc tính họ phông chữ trong fontawclaw.css hoặc fontawclaw.min.css


đây là một giải pháp hoàn hảo cho tôi - thật tệ là câu trả lời ở phía dưới, tôi đã không nhìn thấy nó và phải tự mình tìm ra nó
Cold_Class

2

Có thể đường dẫn phông chữ của bạn không chính xác để css không thể tải phông chữ và hiển thị các biểu tượng để bạn cần cung cấp đường dẫn bị mắc kẹt của các phông chữ đính kèm.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}


2

Bắt đầu từ phiên bản 5, nếu bạn đã tải xuống gói từ trang web này:

https://fontawgie.com/d Download

Các phông chữ nằm trong tệp all.css và all.min.css.

Đây là những gì tài liệu tham khảo của bạn sẽ trông giống như sử dụng phiên bản mới nhất bây giờ (thay thế bằng thư mục của bạn):

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

2

Sau khi đấu tranh để tìm giải pháp và KHÔNG tìm thấy tài liệu chính thức hữu ích, điều này đã giải quyết vấn đề cho tôi:

  1. Tải xuống Fontawgie.zip. Tôi đang sử dụng phiên bản 5.10.2 và tôi đã nhận được từ đây https: // fontawclaw.com/d Download
  2. Bên trong tệp zip có một số thư mục. Bạn chỉ cần thư mục css và webfonts nhập mô tả hình ảnh ở đây

    1. Tạo 2 thư mục trong các dự án web của bạn và đặt tên chúng là css và webfonts. nhập mô tả hình ảnh ở đây

Những tên này là bắt buộc. Bây giờ sao chép nội dung của css và webfont từ zip vào các thư mục tương ứng trong dự án của bạn. Và đó là tất cả!

Coi chừng fontawgie! Awesomeness đang làm cho mọi thứ đơn giản cho người dùng!


1

Tôi đã thay đổi từ 3.2.1 thành 4.0.1 và thư mục là phông chữ và bây giờ được gọi là phông chữ.

src: url ('../ font / fontawgie-webfont.eot? v = 3.2.1');

src: url ('../ phông chữ / fontawgie-webfont.eot? v = 4.0.1');

Tôi hy vọng nó sẽ giúp được ai đó.


1

Tôi sử dụng Gem Gem SASS Ruby Gem chính thức và sửa lỗi bằng cách thêm dòng dưới đây vào application.css.scss của tôi

@import "font-awesome-sprockets";

Giải trình:

Tệp font-awesome-sprockets bao gồm các hàm Sass của trình trợ giúp xác thực sprockets được sử dụng để tìm đường dẫn thích hợp đến tệp phông chữ.


1

nếu bạn sử dụng sass và đã nhập trong main.scss của bạn @import '../vendor/font-awesome/scss/font-awesome.scss';

Lỗi có thể đến từ tệp font-awesome.scss đang tìm kiếm các tệp phông chữ trong đường dẫn tương đối của nó.

Vì vậy, hãy nhớ ghi đè biến $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

như thế này, không cần thêm cdn vào index.html của bạn


1

Kiểm tra kỹ tệp tin fontawgie-all.css - ở dưới cùng sẽ có đường dẫn đến thư mục webfonts. Của tôi có định dạng "../webfonts", điều đó có nghĩa là tệp css sẽ được tìm kiếm 1 cấp từ vị trí của nó. Vì tất cả các tệp css của tôi đều nằm trong thư mục css và tôi đã thêm các phông chữ vào cùng một thư mục, điều này không hoạt động.

Chỉ cần di chuyển thư mục phông chữ của bạn lên một cấp độ và tất cả sẽ ổn :)

Đã thử nghiệm với Font Awesome 5.0


Đây phải là câu trả lời ưa thích vì nó trả lời trực tiếp câu hỏi mà không liên kết đến tài liệu lỗi thời. Kudos
Nhà vô địch Kyle

1

Tôi đã có cùng một vấn đề với font chữ tuyệt vời 5 tải với sợi, tôi đã khiến thêm file min.css CÙNG với file all.js.

Hy vọng điều này sẽ giúp ai đó

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

1

Tệp /css/all.css chứa kiểu dáng cốt lõi cộng với tất cả các kiểu biểu tượng mà bạn sẽ cần khi sử dụng Font Awesome. Thư mục / webfonts chứa tất cả các tệp kiểu chữ mà các tham chiếu CSS ở trên và phụ thuộc vào.

Sao chép toàn bộ thư mục / webfonts và /css/all.css vào thư mục tài sản tĩnh của dự án của bạn (hoặc bất cứ nơi nào bạn muốn giữ tài sản mặt trước hoặc nội dung của nhà cung cấp).

Thêm một tham chiếu đến tệp /css/all.css được sao chép vào từng mẫu hoặc trang mà bạn muốn sử dụng Font Awesome trên.

Chỉ cần truy cập - https://fontawgie.com/how-to-use/on-the-web/setup/hosting-font-awemme-yourself Bạn sẽ nhận được câu trả lời.


0

Sử dụng tuyệt đối thay vì đường dẫn tương đối đã giải quyết nó cho tôi. Tôi đã sử dụng các đường dẫn tương đối (xem ví dụ đầu tiên bên dưới) và điều đó không hiệu quả. Tôi đã kiểm tra qua bàn điều khiển và thấy máy chủ đang trả về 404, không tìm thấy tệp.

Đường dẫn tương đối gây ra 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Đường dẫn tuyệt đối đã giải quyết nó trên trình duyệt:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

Tôi không khuyên bạn nên làm điều này trừ khi bạn phải làm, nhưng nó hiệu quả với tôi. Tất nhiên, bạn nên lặp lại điều này cho tất cả các định dạng phông chữ trong tệp font-awesome.css.


0

Nó không làm việc cho tôi vì tôi đã có Allow from none chỉ thị cho thư mục gốc trong cấu hình apache của tôi. Đây là cách tôi làm cho nó hoạt động ...

Cấu trúc thư mục của tôi:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

nơi index.html của tôi có:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

Tôi đã chọn tiếp tục không cho phép truy cập vào root của mình và thay vào đó đã thêm một mục nhập thư mục khác trong cấu hình apache của tôi cho root / font-awesome /

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.