Lỗi Font Awesome icon không hiển thị
Sơ đồ trang
Font Awesome là một thư viện font icon độc đáo và hoàn toàn miễn phí. Nó cung cấp hàng nghìn icon font với nhiều kiểu dáng khác nhau, từ biểu tượng vật dụng hằng ngày đến biểu tượng cho các dịch vụ web. Nếu bạn muốn tìm hiểu thêm về Font Awesome 5 bạn có thể đọc qua 1 bài viết giới thiệu chi tiết hơn về Font Awesome tại đây
Trong bài viết này cùng tìm hiểu 1 số nguyên do Font Awesome 5 icon không hiển thị dù bạn đã chèn code Font Awesome vào vị trí mà bạn mong muốn rồi.
1. Bạn nên đảm bảo đã tải thư viện Font Awesome
View source website của bạn (F12) sau đó kiểm tra xem Font Awesome có được khai báo và load hay chưa. Thường Font Awesome sẽ tải qua CDN như sau.
Web Fonts & CSS
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css">
SVG & JS
<script defer src="https://use.fontawesome.com/releases/v5.15.0/js/all.js"></script>
2. Kiểm tra xem bạn có đang gọi đúng Font Awesome CSS không
Font Awesome 5 được chia thành Solid, Regular, Light, Brands và những thứ này chỉ có thể được áp dụng theo các cấp độ sau:
- Solid – Free
- Regular – Pro Only
- Light – Pro Only
- Brands – Free
Vì vậy, chẳng hạn, bạn không thể hiển thị font Regular hoặc Light nếu bạn đang sử dụng Font Awesome bản miễn phí.
3. Chắc chắn định dạng Unicode CSS chính xác
.vutruso-css:before {
font-family: "Font Awesome 5 Free";
content: '\f077';
font-weight: 600;
}
4. Kiểm tra Font Awesome Font Family trong CSS
Nếu bạn có đúng tệp/đặc quyền (như trên), thì kiểm tra thêm Font Awesome Font Family nữa.
/* Free */ font-family: "Font Awesome 5 Free"; /* Pro */ font-family: "Font Awesome 5 Pro"; /* Specific Free */ font-family: "Font Awesome 5 Free Solid"; /* Solid */ font-family: "Font Awesome 5 Brands"; /* Brands */ /* Specific Pro */ font-family: "Font Awesome 5 Pro"; /* Solid, Regular, Light */ font-family: "Font Awesome 5 Pro Regular"; /* Regular */ font-family: "Font Awesome 5 Pro Light"; /* Light */ font-family: "Font Awesome 5 Brands"; /* Brands */
Lưu ý ‘Brands‘ ở trên không tuân theo quy ước đặt tên của Font Awesome trên cả phiên bản Free và Pro. Ví dụ: nếu bạn muốn hiển thị Font Awesome Facebook Icon thì bạn nên áp dụng kiểu “Font Awesome 5 Brands”
5. font weight
Nhiều trình duyệt sẽ hiển thị một ô trống trừ khi bạn sử dụng Font Weight là 600, vì vậy hãy thêm font-weight: 600; vào css
font-weight: 600; /* or something even higher */ /* font-weight: 900; */
Kết luận
Hy vọng bài viết trên sẽ giúp bạn khắc phục được lỗi không hiển thị biểu tượng Font Awesome trên website của bạn.
Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
Bài viết liên quan
