20 tháng 1, 2019

Hướng Dẫn Sử Dụng Font Awesome - Trong Thiết Kế Web

star út
tháng 1 20, 2019 - 20 tháng 1, 2019

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é .
Hướng Dẫn Sử Dụng Font Awesome - Trong Thiết Kế Web

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 .
<i class = "ten icon font awesome "></i>
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ế .

Lời kết 

Chúc các thành công , thật đơn giản để tạo một icons font awesome đúng không nào

Vì Sao Chọn Chúng Tôi

Hỗ Trợ

Hỗ Trợ Chân Thành , Chăm Sóc khách hàng là niềm yêu thích của chúng tôi

Thời Gian

Hoàn Thành Nhiệm Vụ Được Giao Đúng Thời Gian Đảm Nhận , Trước Hẹn...

Chất Lượng

Chúng Tôi Cam Kết Chất lượng đặt lên hàng đầu mang lại cho khách hàng hài lòng nhất , ...

Giá Cả Hợp Lý

Giá Cả cạnh tranh , uy tín đặt lên hàng đầu

LIÊN HỆ NGAY