Cách sử dụng font awesome

css
html

(Lê Minh Cường) #1

Em muốn sử dụng font awesome.
Em đã download bản mới nhất và nhưng nó chỉ hiện ra hình vuông thui, em không biết tại sao. Anh chị giúp em với


các tệp nằm cùng 1 thư mục

khai báo trong html

kết quả là 1 hình vuông.


(Tynk Huynk) #2

font-awesome.min.css không phải địa chỉ url hợp lệ để lấy file css của awesomefont từ network về.

Bạn kiểm tra lại nhé. Hoặc tham khảo: https://www.w3schools.com/icons/fontawesome_icons_intro.asp


(Lê Minh Cường) #3

À cái này mình muốn download font về chứ không sử dụng link trên mạng, do mình làm đồ án mình không chắc thầy sẽ bật mạng nên mình phải làm như vậy


(Vô Thin) #4

Thua nhé, không download font tự động về được đâu, có biết viết script để get thì viết, còn không phải download thủ công bỏ vào một thư mục để dùng.


(Tynk Huynk) #5

Vậy thì sửa địa chỉ thành ../font-awesome.min.css


(Lê Minh Cường) #6

nó mất tiêu luôn bạn


(Tynk Huynk) #7

Vậy thì có thể địa chỉ thư mục ban đầu có thể dúng, vậy hình vuông là lỗi hiển thị… :thinking:


(Lê Minh Cường) #8


thông tin thêm là mình sử dụng link từ trang web thì ra kết quả

Có khi nào mình download sai sót gì không


(Quân) #9

ngoài file css bạn cần tải thêm cả file font về nữa thì mới hiển thị được. vị trí lưu tương tự như ảnh chụp

sai rồi nhé, đây là link tương đối, trình duyệt hoàn toàn hiểu được link này, ngoài ra bạn này hiển thị được hình vuông tức là đã nhận css rồi.


(Lê Minh Cường) #10
<link rel="stylesheet" href="./css/fontawesome.min.css">
<link rel="stylesheet" href="./css/svg-with-js.css">
<link rel="stylesheet" href="./css/all.min.css">
<link rel="stylesheet" href="./css/brands.min.css">
<link rel="stylesheet" href="./css/regular.min.css">
<link rel="stylesheet" href="./css/svg-with-js.css">
<link rel="stylesheet" href="./css/solid.min.css">
<link rel="stylesheet" href="./css/v4-shims.min.css">

:slight_smile: em làm vậy thì nó hiện ra.


(Lam Pham) #11

Đúng rồi bạn. Fontawesome bản mới nó tách css riêng ra các file.

Bạn sử dụng icon loại nào thì tải css loại đó về => không phải tải hết css => giảm dung lượng.

Do đó có 4 lựa chọn là:

  • All:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  • Solid (tương ứng với icon dạng fas)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/solid.css" integrity="sha384-osqezT+30O6N/vsMqwW8Ch6wKlMofqueuia2H7fePy42uC05rm1G+BUPSd2iBSJL" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">
  • Regular (tương ứng với icon dạng far)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/regular.css" integrity="sha384-4e3mPOi7K1/4SAx8aMeZqaZ1Pm4l73ZnRRquHFWzPh2Pa4PMAgZm8/WNh6ydcygU" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">
  • Brand (tương ứng với icon dạng fab)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/brands.css" integrity="sha384-Px1uYmw7+bCkOsNAiAV5nxGKJ0Ixn5nChyW8lCK1Li1ic9nbO5pC/iXaq27X5ENt" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">

Trong ví dụ trên bạn dùng: far fa-grin-stars => loại regular.

Tức là bạn cần include các file css phần regular bên trên ( regular.css và fontawesome.css) là đủ.

Tham khảo: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css


83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?