Cách sử dụng font awesome là một trong những keyword được search nhiều nhất trên Google về chủ đề cách sử dụng font awesome. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Hướng dẫn cách sử dụng font awesome mới nhất 2020.
Hướng dẫn cách sử dụng font awesome mới nhất 2020
Trong một layout web thường sẽ có những ICON giúp web xinh và gần gũi hơn, và tuy nhiên các ICON đó còn có chức năng điều hướng người dùng.
cách sử dụng font awesome
trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra từ file PSD và sử dụng CSS để gán background hoặc dùng thẻ img để mang ICON đó vào. bên cạnh đó cho đến nay chúng ta vừa mới có giải pháp không giống đó là sử dụng Symboy Font (font chữ kiểu ký hiệu). bây giờ có nhiều thư viện Symboy Font nhưng mạnh nhất và hay sử dụng nhất là Font Awesome vì nó dễ dàng và easy sử dụng.
Trước khi học phương pháp sử dụng Font Awesome thì ta tìm hiểu khái niệm của nó vừa mới nhé. Nhưng để nóng thì mình mang một ví dụ cho bạn thấy:
gợi ý:
xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
< html > < head > < tít >Font Awesometitle> <meta charset="UTF-8"> <meta name="viewport" nội dung="width=device-width, initial-scale=1.0"> <liên kết rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> head> <body> <p> <i class="fa fa-spinner fa-spin fa-3x ">i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw ">i> <i class="fa fa-refresh fa-spin fa-3x fa-fw ">i> <i class="fa fa-cog fa-spin fa-3x fa-fw ">i> <i class="fa fa-spinner fa-pulse fa-3x fa-fw ">i> p> body> html> |
Kết quả:
Bạn thấy rạch ròi mình không dùng một hình ảnh nào mà vẫn đủ sức tạo được các icon động xinh lộng lẫy thế đó.
nguồn: freetuts.net