Trong làm web chắc các bạn ít nhiều gì cũng đã nghe nói đến fonts awesome rồi phải không nhỉ , vậy fonts awesome là gì thì mình cũng nói sơ qua cho những bạn chưa biết luôn nhé .
Font awesome là gì
Font awesome là một font chữ ký hiệu một vật hay một apps... Gì đó nhầm giúp người đọc nhận biết được , fonts awesome cũng thường là một điểm đi đến page khác trong website , khi sử dụng font awesome thì bạn không cần phải dùng icons hình ảnh thay thế các mục như trước nữa , việc sử dụng hình ảnh để thiết kế layout cho website sẽ khiến website load chậm hơn vì phải tải nhiều icon img cùng lúc , nhưng đặc biệt riêng với fonts awesome website chỉ cần tải một trang css đã nhúng vào website đó , đương nhiên cũng sẽ khiến website cải thiện tốc độ loand trang nhanh hơn so với dùng hình ảnh thay thế rồi
Hướng dẫn
Để dùng được font awesome thì các bạn phải nhúng mã sau vào dưới thẻ <head> mở của bạn .
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
- Cách sử dụng font awesome để sử dụng font awesome thì các bạn vào địa chỉ trang web của font awesome sau https://fontawesome.com/v4.7.0/icons/ và tìm cho mình một icons thích hợp để sử dụng. ( ở đây là v4.7 nhé hiện tại thì font awesome đã có v5.0 vì vậy bạn cũng có thể cập nhật mã nhúng v5.0 để sử dụng )
- Ví Dụ : ở đây mình sử dụng đoạn html sau để chèn tên icon fonts awesome .
Các bạn chú ý thẻ <i mở phía sau có thuộc tính class = " là nơi bạn chèn icons font awesome thay thế .
Ví dụ hoàn chỉnh như sau :
<i class=”fa fa-facebook”></i>Sau khi sử dụng chúng sẽ ra như sau ( ở đây mình chọn tên font của Facebook nhé )
Ví dụ đoạn html nhúng fonts awesome có màu sắc
<i class='fa fa-facebook' style='background:#3333FF'/>Chỗ mình tô màu đỏ là mã màu css bạn có thể thay thế .
Không có nhận xét nào