Helpex - Trao đổi & giúp đỡ Đăng nhập
142

Gần đây, tôi đang phát triển một trang web và tôi đang cố gắng sử dụng một số biểu tượng phông chữ tuyệt vời.

Vấn đề là, chúng không hiển thị.

Đây là 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">

Đâ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>
142 hữu ích 4 bình luận 572k xem chia sẻ
25 trả lời 25
120

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

120 hữu ích 1 bình luận chia sẻ
113

Đố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 <span>hoặc <i>phần tử bạn sử dụng, sử dụng họ FontAwesomephông chữ. Ví dụ, nó không chỉ

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

    nhưng

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

    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 điều 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.

113 hữu ích 5 bình luận chia sẻ
36

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
  • brand.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à đưa 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ặt hàng đề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 ý thêm, 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">
36 hữu ích 2 bình luận chia sẻ
13

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 giải đáp lý do 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.

13 hữu ích 3 bình luận chia sẻ
7

Chỉ cần thêm một số thông tin vào 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>
7 hữu ích 2 bình luận chia sẻ
6

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" />
6 hữu ích 0 bình luận chia sẻ
5

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.

5 hữu ích 0 bình luận chia sẻ
4

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 <i class="fa fa-[icon-name]"></i>. Đây là ban đầu <i class="fas fa-[icon-name]"></i>.

Hi vọng điêu nay co ich.

4 hữu ích 2 bình luận chia sẻ
4

Ghi chú

Câu trả lời này được tạo ra khi phiên bản mới nhất của fontawesomev5. * Nhưng sợiNPM 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-awesomethô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 xem 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 bạn 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 tích hợp sẵn 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à tìm kiếm biểu tượng đăng nhập (làm ví dụ). Bạn sao chép biểu tượng <i class="fas fa-sign-in-alt"></i>, ví dụ , bạn dán nó vào html của mình 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ụ: <i class="fa fa-sign-in" aria-hidden="true"></i>và kết hợp nó vào html của bạn.

4 hữu ích 1 bình luận chia sẻ
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ã

2 hữu ích 0 bình luận chia sẻ
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 thiết lập trọng lượng phông chữ này, nó có thể hiển thị hình vuông.

2 hữu ích 0 bình luận chia sẻ
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.cssall.min.css .

Vì vậy, tham chiếu của bạn sẽ trông 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ữ.

2 hữu ích 0 bình luận chia sẻ
2

Tôi gặp sự cố tương tự, Hiển thị biểu tượng bằng hình vuông, đã thử theo hướng dẫn được chỉ định tại đây: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Giải quyết bằng cách sử dụng tham chiếu này trong phần đầu của trang html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
2 hữu ích 0 bình luận chia sẻ
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'/>
1 hữu ích 0 bình luận chia sẻ
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">
1 hữu ích 0 bình luận chia sẻ
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à phong cách 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);
}
1 hữu ích 0 bình luận chia sẻ
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ã

1 hữu ích 0 bình luận chia sẻ
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>
0 hữu ích 0 bình luận chia sẻ
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">
0 hữu ích 0 bình luận chia sẻ
0

Sử dụng liên kết này:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />
0 hữu ích 0 bình luận chia sẻ
0

Nếu bạn đang sử dụng phiên bản Angular mới hơn, chỉ cài đặt gói với npm / fiber là không đủ. Bạn cũng cần nhập tệp css (với @import "~bootstrap-icons/font/bootstrap-icons.css";) trong styles.scss của mình .

0 hữu ích 0 bình luận chia sẻ
0

Đảm bảo bạn bao gồm rel và type, 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 đối với tôi.

0 hữu ích 0 bình luận chia sẻ
-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>
-1 hữu ích 0 bình luận chia sẻ
-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 tới 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!

-2 hữu ích 1 bình luận chia sẻ
-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 ).

-6 hữu ích 3 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ html css font-awesome , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading