VNIT

Chia Sẻ Giá Trị


Liên Hệ Dịch Vụ

20 tháng 1, 2019

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

Vnit Tech
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

Dịch Vụ Thiết Kế WebSite


Bán hàng đảm bảo Thiết Kế Web

Chúng tôi cung cấp website theo mẫu , thiết kế web Theo Yêu Cầu

Cam kết giá tốt Cam kết giá tốt

Website Trên Blogvnit Cam Kết Với Giá Tốt Nhất Hiện Nay

Giao hàng toàn quốc Bảo Hành , Fix Lỗi

Bảo hành hỗ trợ cài đặt miễn phí đến khi hợp ý khách hàng

Dịch vụ hỗ trợ 24/7 Dịch vụ hỗ trợ 24/7

Đội ngũ nhân viên của blogvnit Hân hạnh đồng hành cùng bạn

BÁO GIÁ DỊCH VỤ