Trong một layout website thường sẽ có những ICON giúp website đẹp và thân thiện hơn, và ngoài ra các ICON đó còn có tác dụng điều hướng người dùng.
Hãy bắt tay vào và tạo cho Website của chính mình với bộ Font Awesome thật đơn giản và nhẹ nhàng :).
Trước tiên copy đoạn code bên dưới dán vào sau thẻ <head> và sau đó thực hiện tuần tự như bài hướng dẫn bên dưới
Cách tạo Font Awesome lớn:
Để tăng kích thước của các icons thì bạn sử dụng các class.
fa-lg (class này sẽ tăng 33% so với kích thước mặc định)
fa-2x, fa-3x, fa-4x, fa-5x <= Các class này sẽ tăng theo tỷ lệ tương ứng với tên class
Có thể xem thêm 1 VD nữa về load gif thay vì bạn phải chèn một file hình ảnh bằng .gif
Ở đây ta có thể tận dụng Font Awesome để cho nhẹ web
Hy vọng bài viết này có thể giúp ích cho bạn. Chào thân ái!
Hãy bắt tay vào và tạo cho Website của chính mình với bộ Font Awesome thật đơn giản và nhẹ nhàng :).
Trước tiên copy đoạn code bên dưới dán vào sau thẻ <head> và sau đó thực hiện tuần tự như bài hướng dẫn bên dưới
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Các bạn có thể xem Font Awesome ở bên dưới nhé !
Cách tạo Font Awesome lớn:
Để tăng kích thước của các icons thì bạn sử dụng các class.
fa-lg (class này sẽ tăng 33% so với kích thước mặc định)
fa-2x, fa-3x, fa-4x, fa-5x <= Các class này sẽ tăng theo tỷ lệ tương ứng với tên class
Tôi lấy VD:
<i class="fa fa-camera-retro fa-lg"></i>Sẽ cho ra kết quả như vầy:
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
-fa-lg -fa-2X -fa-3X -fa-4X -fa-5X
Ở đây ta có thể tận dụng Font Awesome để cho nhẹ web
Với đoạn code:
<i class="fa fa-spinner fa-spin fa-3x "></i>Và kết quả như thế này:
<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>
