123

Gần đây, tôi đang phát triển trang web này và tôi đang cố gắng đặt một phông chữ biểu tượng tuyệt vời vào đó, để nó có thể mở rộng.

Vấn đề là họ không xuất hiện.

Nhìn vào HTML:

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

hoặc là

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

Tôi đã đặt tham chiếu bảng định kiểu vào đầu.

Tôi không biết tại sao họ không xuất hiện.

Đây là tài liệu tham khảo:

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

Được rồi, đây là html đầy đủ:

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

1

Hoạt động tốt với tôi: jsfiddle.net/ZF7x4

— Shahar

liên quan stackoverflow.com/questions/14366158/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

Vui lòng thử một phiên bản khác của font-awesome. Ví dụ: một số biểu tượng không hiển thị cho tôi trên phiên bản 4.3.0 nhưng chúng đã xuất hiện trên 4.7.0.

— Almir Campos

Vui lòng kiểm tra stackoverflow.com/a/55977898/4874281 . Hy vọng nó sẽ giúp được ai đó

— manian

105

Dưới sự tham khảo của bạn, bạn có cái này:

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

Cụ thể là href=phần.

Tuy nhiên, dưới html đầy đủ của bạn là:

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

Bạn đã thử thay thế src=bằng href=html đầy đủ của mình để trở thành cái này chưa?

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

Hoạt động cho tôi: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
nguồn

10

Lưu ý : đôi khi bạn có thể thấy các ô trống, sau đó kiểm tra lại xem bạn có tệp css và phông chữ trong cùng một thư mục hay không, hãy kiểm tra điều này , hy vọng sẽ giúp được ai đó.

— shaijut

104

Đối với những người tìm kiếm các biểu tượng phông chữ tuyệt vời còn thiếu, tôi đã thu thập một số ý tưởng:

Đảm bảo rằng bạn sử dụng một liên kết chính xác tới CDN, chẳng hạn như:

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

Nếu trang của bạn sử dụng HTTPS, bạn có liên kết đến CSS có phông chữ tuyệt vời bằng HTTPS không (thay thế http://bằng https://trong liên kết ở trên).
Kiểm tra kỹ xem bạn chưa bật AdBlock Plus hoặc uBlock. Họ có thể đang chặn một số biểu tượng.
Đặt lại bộ nhớ cache của trình duyệt của bạn. (Trên Chrome, hãy nhấp vào nút tải lại và chọn Đặt lại bộ nhớ đệm cứng)
Đảm bảo rằng hoặc phần tử bạn sử dụng, sử dụng họ FontAwesomephông chữ. Ví dụ, nó không chỉ
```

```
nhưng
```

```
Nó sẽ không hoạt động nếu bạn có thứ gì đó như sau trong CSS của mình:
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
Nếu bạn đang sử dụng IE8, bạn có đang sử dụng HTML5 Shim không?
Nếu cách này không hiệu quả, có các Ý tưởng khắc phục sự cố khác trên Wiki Font Awesome.

— mxro
nguồn

3

Tôi sẽ nói thêm: Kiểm tra .htaccess của bạn không chặn các tiện ích mở rộng ttf, svg, eot hoặc woff

— BassMHL

ghi đè phông chữ! Không có nhiều câu trả lời đề cập đến điều này. Tôi đã kiểm tra và kiểm tra và kiểm tra và cuối cùng đã tìm ra nó. Tôi cũng đã gặp vấn đề này trong quá khứ và không biết tại sao, nhưng bây giờ tôi biết.

— adrianmc 17/02/16

1

Tôi đã bỏ lỡ để thêm tên duy nhất falàm tên lớp trước. Cảm ơn. Câu trả lời hoàn hảo để tìm ra vấn đề từng bước.

— Kai Noack,

Đối với tôi nó là cái gì khác thiết lập font-family

— levininja

Đối với tôi, tôi đã có "font-weight: 500" (để làm cho nó phù hợp với chủ đề tôi đang sử dụng). Tôi đã phải đặt nó là "font-weight: bold"

— bowlerae

24

Lúc đầu, tôi không thể làm cho điều này hoạt động với Font Awesome 5 :

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

Đó là lý do tại sao tôi đến đây, không quen với phông chữ tuyệt vời. Vì vậy, khi tôi xem xét kỹ hơn, tôi nhận thấy rằng vấn đề của tôi chỉ là vấn đề với phiên bản.

w3schools đã giúp tôi trong trường hợp này.

Điểm mới trong Font Awesome 5 là fastiền tố, Font Awesome 4 sử dụng fa.

S in faslà viết tắt của solid và một số biểu tượng cũng có chế độ thông thường , được chỉ định bằng cách sử dụng tiền tố far.

Tôi đã nhận thấy các tệp khác nhau trong thư mục css FontAwesome, như:

all.min.css
thương hiệu.min.css
fontawesome.min.css
thường.min.css
solid.min.css

Và đó là lúc tôi nhận ra sai lầm của mình. Tất cả những gì tôi phải làm là bao gồm css thích hợp vào 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">

Và sau đó tham chiếu mục chính xác:

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

Thiết lập này phù hợp với tôi. Mặc dù không phải tất cả các mục đều có giá trị tương đương trong mỗi loại. Điều này sẽ không hoạt động:

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

Lưu ý nhỏ, khi bạn không muốn tham chiếu đến tất cả các tệp riêng biệt thì điều này sẽ đủ:

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

Ngoài ra, bảng gian lận cho biết những mục nào có sẵn cho mỗi loại biểu tượng.

— Ruard van Elburg

12

Của tôi không hoạt động vì tôi muốn có một biểu tượng không được phát hành trong phiên bản FA mà tôi đang sử dụng.

Điều này trả lời tại sao một số biểu tượng hiển thị nhưng những biểu tượng khác thì không.

Khá rõ ràng nhưng tôi đoán một số người vẫn rơi vào điều này. Giống tôi.

— Taiguara Andrade
nguồn

4

Có, nó cung cấp câu trả lời cho câu hỏi.

— Bobort

2

Hoặc bạn đang cố gắng sử dụng một phông chữ cũ hơn không còn tồn tại trong phiên bản bạn đang sử dụng. Ví dụ: cái này chỉ được gọi là times-circle chứ không phải times-circle-o là tên cũ: fontawesome.com/v4.7.0/icon/times-circle-o

— Smoore4

1

Cảm ơn bạn!! Điều này khiến tôi phải kéo tóc cả ngày

— 24x7

5

Bạn phải sử dụng https cho maxcdn.bootstrapcdn.com. Chỉ https trên maxcdn hỗ trợ CORS

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

— Chatchawan Wongsiriprasert
nguồn

4

Tôi đã giải quyết vấn đề này bằng cách đặt thư mục Fonts ở cùng cấp với các tệp CSS của tôi.

— lolo
nguồn

3

Bất cứ ai có thể được kiểm tra ra này trong năm 2018. Tôi đang sử dụng font chữ tuyệt vời 4.7.0 và tôi đã nhận vấn đề này được giải quyết bằng cách đơn giản đưa ra khỏi strong fasnhư đã thấy trong đoạn code . Đây là ban đầu .

Hi vọng điêu nay co ich.

— Goodluck Leo
nguồn

Thêm vào đó, tôi đang chạy máy chủ node.js.

— Goodluck Leo

Điểm mới trong Font Awesome 5 là tiền tố fas, Font Awesome 4 sử dụng fa. Từ w3schools

— Ruard van Elburg

2

Chỉ cần thêm một số thông tin khác cho các câu trả lời ở trên liên quan đến cập nhật về fontawesome,

Nếu bạn sử dụng phông chữ awesome 5,

a. chỉ cần sao chép để dán HTML bên dưới,

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

Lưu ý: Tốt hơn nên bao gồm tất cả các tập lệnh của bạn trong<body> {YOUR_SCRIPT_HERE}</body> và ngay trước đó (YOUR_CLOSING_BODY)

b. Và ví dụ,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

— Sundar Gsv
nguồn

Làm thế nào về việc phục vụ css cục bộ thay vì liên kết đến trang web fa?

— Ghilteras

đây là trường hợp của tôi ... tôi không có tệp js, bây giờ nó hoạt động!

— Cristian Sepulveda

2

thêm điều này làm việc cho tôi:

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

hãy xem

vì vậy ví dụ đầy đủ là:

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

Mở rộng đoạn mã

— edgarmtze
nguồn

2

Nếu bạn xác định CSS tùy chỉnh, bạn phải đặt font-weight: 900;cho một số thư viện Font Awesome mới hơn (từ phiên bản 5). Không đặt trọng lượng phông chữ này, nó có thể hiển thị hình vuông.

— jurev
nguồn

2

Ghi chú

Câu trả lời này được tạo khi phiên bản mới nhất của fontawesome là v5. * Nhưng sợi và NPM phiên bản điểm để v4. * (2019/06/21). Nói cách khác, các phiên bản được cài đặt thông qua trình quản lý gói là phiên bản mới nhất!

Nếu bạn đã cài đặt font-awesome thông qua trình quản lý gói ( sợi hoặc npm ) thì hãy lưu ý phiên bản nào đã được cài đặt. Ngoài ra, nếu bạn đã cài đặt font-awesometừ lâu, hãy kiểm tra phiên bản nào đã được cài đặt.

Cài đặt phông chữ tuyệt vời làm phụ thuộc mới:

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

Kiểm tra phiên bản font-awesome đã được cài đặt:

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

Vấn đề

Sau khi cài đặt font-awesomephụ thuộc, bạn kết hợp một trong hai tệp nguồn này font-awesome.csshoặc font-awesome.min.css(được thành lập trong node_modules/font-awesome/css/) vào tiêu đề trang web của bạn, ví dụ:

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

Tiếp theo, bạn truy cập https://fontawesome.com/ . Bạn chọn các biểu tượng miễn phí và bạn tìm kiếm biểu tượng đăng nhập (làm ví dụ). Bạn sao chép biểu tượng , ví dụ , bạn dán nó vào html của bạn và, biểu tượng không được hiển thị, hoặc được hiển thị dưới dạng hình vuông hoặc hình chữ nhật!

Giải pháp

Về bản chất, các phiên bản được cài đặt thông qua trình quản lý gói là phiên bản được hiển thị trên trang web https://fontawesome.com/ . Như bạn có thể thấy, chúng tôi đã cài đặt font-awesome v4.7.0nhưng, trang web hiển thị tài liệu cho font-awesome v5.*. Giải pháp, hãy truy cập trang web cung cấp các biểu tượng cho v4.7.0 https://fontawesome.com/v4.7.0 , sao chép biểu tượng thích hợp, ví dụ: và kết hợp nó vào html của bạn.

— Lukasz Dynowski
nguồn

Họ đã phát hành một gói mới ở đây có phiên bản mới nhất. Nó cũng tương thích với ít hơn và sass \ o /

— DerpyNerd

2

Đối với phiên bản 5:

Nếu bạn đã tải xuống gói miễn phí từ trang web này:

https://fontawesome.com/download

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

Vì vậy, tham chiếu của bạn sẽ giống như sau:

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

Tệp fontawesome.css không bao gồm tham chiếu phông chữ.

— tình yêu sống
nguồn

1

Nếu bạn đang sử dụng dịch vụ lưu trữ blogger, hãy sử dụng css bảng định kiểu url này:

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

— Nurdin BM.
nguồn

1

Hãy thử hai liên kết dưới đây giữ trong thẻ tiêu đề.

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

Lấy các biểu tượng từ liên kết dưới đây:

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

— quả anh đào
nguồn

1

Tôi sử dụng:

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

và tạo kiểu sau:

.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);
}

— Trần Anh Hiền
nguồn

1

liên kết CDN mà bạn đã đăng, tôi cho rằng đó là lý do tại sao nó không hiển thị chính xác, bạn có thể sử dụng liên kết này bên dưới, nó hoạt động hoàn hảo đối với tôi.

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

Mở rộng đoạn mã

— John Kesh Mahugu
nguồn

1

Tôi có thể làm cho Font Awesome hoạt động bằng cách sử dụng tệp all.min.css.

— Rob Breidecker
nguồn

0

Đảm bảo rằng bạn bao gồm rel và nhập như trong "rel =" stylesheet "type = 'text / css'" trong liên kết đến tệp css awesomefont. Nếu không có những thứ này, tệp không được tải chính xác cho tôi.

— Elliot Robert
nguồn

0

Bạn có thể thêm cái này vào tệp .htaccess trong thư mục phông chữ tuyệt vời

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

0

Tôi đã thử nghiệm và nó đang hoạt động.

Thay vì điều này

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

Sử dụng nó với HTTPS

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

— Atif Tariq
nguồn

-1

Bạn cần một nhà nhập khẩu phông chữ. | thử

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

— SIAMWEBSITE
nguồn

-2

Tôi phải làm việc bằng cách chỉnh sửa tệp font-awesome.css chính. Nó có các url đến src (woff, eot, v.v.) Tôi đã phải thay đổi chúng thành đường dẫn tuyệt đối, ví dụ: http://mywebsite.com/font-awesome.woff Sau đó, nó hoạt động!

— crystallove18
nguồn

2

Tôi không muốn giới thiệu điều này vì bạn đang chỉnh sửa tệp bên ngoài. Bạn (hoặc nhóm của bạn) sẽ cần ghi nhớ điều này mỗi khi họ cần cập nhật fontawesome.

— J Cordero

-6

Thay đổi điều này:

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

Về điều này:

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

Tôi tin rằng bạn cần cái http:nếu không nó không biết phải sử dụng giao thức nào (và file:kết quả là sử dụng sai giao thức ).

— Shahar
nguồn

@ user3870894 Thực ra là href, tôi đang nghĩ đến javascript. Nhưng hãy thử mã mới.

— Shahar

@ user3870894 o_o Sau đó hãy đăng toàn bộ HTML hoặc ít nhất là các phần chính. Bàn điều khiển nói gì? Bạn đã thử kiểm tra phần tử?

— Shahar

2

@Shahar Bằng cách sử dụng //trình duyệt, chọn giao thức mà trang web yêu cầu đang sử dụng. Khi trang web của bạn đang sử dụng https, nó sẽ chọn https. Nếu bạn đang sử dụng http, nó sẽ sử dụng http để yêu cầu tệp từ CDN. Tất nhiên, nếu bạn mở trang web bằng cách sử dụng cục bộ file:///, điều này không được khuyến khích, trình duyệt sẽ thực sự cố gắng mở cdn bằng filegiao thức.

— Robin van Baalen

Biểu tượng FontAwesome không hiển thị. Tại sao?

Ghi chú

Vấn đề

Giải pháp