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.
Cách sử dụng font awesome
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.
1 Like
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
1 Like
À 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
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.
1 Like
Vậy thì sửa địa chỉ thành ../font-awesome.min.css
1 Like
nó mất tiêu luôn bạn
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ị… 
1 Like
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
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.
8 Likes
<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">
em làm vậy thì nó hiện ra.
Đú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
8 Likes
mé cũng bị hình vuông giống v may tìm đc comment của bác … thank nhiều nhé ^^
1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?