Hướng dẫn sử dụng Font Awesome toàn tập WDI Blog

Hướng dẫn sử dụng Font Awesome lấy icon cho website10 phút đọc

Font Awesome là Web Icon Font miễn phí với số lượng icon cực kì phong phú, được sử dụng rất nhiều trong làm website hiện nay.Font Awesome có nhiều cách sử dụng khác nhau và nếu bạn là newbie thì có lẽ sẽ cảm thấy khó sử dụng khi lần đầu tiên với Font Awesome.

Do đó trong bài viết này mình sẽ hướng dẫn các bạn chi tiết dễ hiểu cách sử dụng Font Awesome 5.

Font Awesome là gì ?

sử dụng font awesome - font awesome là gì ?

Font Awesome là gì ?

Font Awesome là dịch vụ cho phép đưa vào sử dụng Icon Font một cách dễ dàng.Icon Font là loại icon là dạng hình ảnh có thể hiển thị tương tự như chữ viết.Khi sử dụng Icon Font có những điểm lợi sau :

  • Có thể hiển thị Icon một cách nhanh chóng đơn giản
  • Có thể thay đổi kích thước, màu sắc giống như với text
  • Dù có phóng to lên cũng sẽ không bị vỡ hình ảnh

Đặc biệt Font Awesome ở phiên bản miễn phí thôi cũng có tới hơn 1000 icon các loại, thuộc nhiều chủ để khác nhau.Bạn có thể thoải mái lựa chọn những Icon phù hợp với dự án của mình.

Phiên bản mới Font Awesome 5

Năm 2017 phiên bản Font Awesome 5 được công bố.Phiên bản trước Font Awesome 4 vẫn đang được sử dụng rộng rãi đến tận hôm nay.Cách sử dụng Font Awesome 5 khác khá nhiều so với phiên bản trước đó.

Nếu sử dụng Font Awesome mình nghĩ bạn nên chuyển qua sử dụng phiên bản Font Awesome 5 thay vì phiên bản Font Awesome 4.

Sự khác nhau của phiên bản miễn phí và có phí

Font Awesome cung cấp cả phiên bản Pro nhưng với phiên bản miễn phí thôi mình nghĩ cũng đã đủ dùng.Khi sử dụng phiên bản Pro bạn sẽ có những quyền lợi sau :

  • Số lượng Icon bạn có thể sử dụng tăng lên 7722 Icon (so với 1557 Icon của phiên bản miễn phí)
  • Số style cho Icon có thể sử dụng tăng lên
  • Số category cho Icon có thể sử dụng cũng tăng lên
  • Có khả năng sử dụng CDN dành riêng cho phiên bản Pro
sử dụng font awesome - font awesome phiên bản pro

Font Awesome phiên bản Pro và miễn phí

Để sử dụng phiên bản Pro bạn sẽ phải trả 99 đô la một năm.Nếu bạn đang là công ty thiết kế website thì nên suy nghĩ đến việc sử dụng phiên bản có phí nhé.

Cách sử dụng Font Awesome dùng CSS

Để sử dụng Font Awesome có hai cách đó là dùng CSS và Javascript.Nếu không có lý do gì đặc biệt thì bạn nên sử dụng CSS cho tối ưu.Trong bài viết này mình chỉ hướng dẫn các bạn sử dụng Font Awesome dùng CSS thôi nhé.

Nếu sử dụng CDN bạn có thể dán code vào file HTML, cách này đơn giản và dù bạn là newbie thì cũng có thể làm thành công 100%.Còn một cách nữa là tải file Icon lên server rồi dẫn vào file HTML, cách này cũng không quá khó nên bạn có thể tham khảo.

Phương pháp sử dụng Font Awesome 5 dùng CDN

Trường hợp sử dụng Font Awesome 5 dùng CDN thì bạn chỉ cần dán đoạn code sau vào trong thẻ <head> của file HTML là OK.

Phương pháp sử dụng Font Awesome 5 dùng file Icon trên server

Trường hợp sử dụng file file Icon trên server bạn có thể download file Icon tại link dưới đây.

 

Sau đó bạn tải file này lên server rồi dẫn file đó vào trong thẻ <head> bằng thẻ link.

Chọn Icon hiển thị

sử dụng font awesome - font awesome là gì ?

Lựa chọn Icon Font từ Font Awesome

Đầu tiên bạn hãy chọn Icon Font mà bạn muốn sử dụng từ trang chủ của Font Awesome.Bạn hãy chọn những Icon màu đen vì đó là những Icon miễn phí, những Icon mờ bên xung quanh là những Icon phiên bản Pro.

Ở menu phía bên trái bạn hãy nhấn vào menu 「Free」, lúc này toàn bộ Icon miễn phí sẽ hiện ra để bạn lựa chọn.Thêm một cách nữa là bạn có thể tìm kiếm nhanh Icon bằng cách gõ tên category của Icon hoặc tên trực tiếp bằng tiếng Anh vào thanh tìm kiếm đầu website.Icon liên quan đến từ bạn tìm kiếm sẽ hiển thị ra ngay để bạn lựa chọn.

Hiển thị Icon sử dụng Font Awesome

Sau khi chọn được Icon Font ưng ý rồi thì bạn hãy nhấn chuột vào Icon đó.Để hiển thị Icon đã chọn bạn có hai cách đó là viết trong file HTML hoặc viết trong file CSS.

Hiển thị Icon bằng cách viết vào file HTML

Trường hợp viết vào file HTML bạn hãy nhấn vào vùng mình khoanh đỏ trong hình dưới đây để copy code của Icon Font.

sử dụng font awesome viết vào file html

Sử dụng Font Awesome bằng cách viết code vào file HTML

Đoạn code được copy sẽ có dạng tương tự như dưới đây.Bạn hãy dán đoạn code mà bạn vừa copy được vào file HTML tại vị trí bạn muốn hiển thị Icon.

Hiển thị Icon bằng cách viết vào file CSS

Trường hợp viết vào file CSS thì đầu tiên bạn cần tạo thẻ HTML bất kì và gắn cho nó một class tùy ý.

Trong file CSS bên cạnh class bạn gắn thêm ::before hoặc ::after để quyết định vị trí hiển thị Icon ở phía trước hay phía sau yếu tố HTML.Dưới đây là một đoạn code mẫu sử dụng Font Awesome bằng cách viết vào file CSS.

sử dụng font awesome viết vào file css

Sử dụng Font Awesome bằng cách viết code vào file CSS

Trong thuộc tính content bạn hãy nhập vào đó đoạn code mà bạn copy được khi nhấn vào vùng khoanh đỏ như trong hình trên đây.Đoạn code này gọi là Unicode của Icon.Bạn cũng cần thêm thuộc tính font-family:’Font Awesome 5 Free’ ở phiên bản miễn phí.

Thêm vào đó nếu bạn sử dụng Brands Icon (Icon các thương hiệu nổi tiếng) thì bạn cần thêm thuộc tínhfont-family:’Font Awesome 5 Brands’ thay vì thuộc tính font-family như trên.

Ví dụ sử dụng Font Awesome

Font Awesome chỉ bằng cách thêm class đặc định thôi là bạn có thể sử dụng Icon Font rất linh hoạt như làm hiệu ứng Animation hay quay.

Dưới đây là một số cách sử dụng tiêu biểu của Font Awesome.

Thay đổi màu cho Icon

Font Awesome là Icon Font nên bạn có thể thay đổi màu sắc cho nó tương tự như với text bằng cách thêm thuộc tính color.

sử dụng font awesome thay đổi màu sắc cho Icon

Thay đổi màu sắc cho Icon

Thay đổi kích thước Icon

Ngoài thay đổi về màu sắc thì bạn cũng có thể thay đổi kích thước của Icon sao cho phù hợp với dự án mà bạn đang làm bằng cách thêm class vào thẻ <i> của Font Awesome trong cách viết vào file HTML hay thêm thuộc tính font-size trong cách viết vào file CSS.

Class tương ứng với font-size được mình tổng hợp trong ảnh dưới đây.

sử dụng font awesome thay đổi kích thước cho icon

Thay đổi kích thước cho Icon

Icon của Font Awesome có chiều rộng khác nhau nên nếu sử dụng mà không chỉnh sửa thì trông sẽ không đẹp mắt.

sử dụng font awesome tùy chỉnh chiều rộng icon

Tùy chỉnh chiều rộng Icon

Nếu bạn muốn các Icon hiển thị đều và đẹp thì bạn hãy thêm class fa-fw vào trong thẻ <i> của Font Awesome.Dưới đây là đoạn code mẫu để bạn tham khảo.

Và đây là kết quả :

sử dụng font awesome tùy chỉnh chiều rộng Icon

Tùy chỉnh chiều rộng Icon

Sử dụng Icon đầu danh sách

Trường hợp bạn muốn sử dụng Icon bắt đầu danh sách thì bên trong thẻ <ul> hay <ol> bạn hãy thêm class fa-ul vào thẻ <li> hoặc <span>.Nhìn vào ví dụ dưới đây bạn có thể hiểu rõ hơn.

Kết quả như hình dưới đây :

sử dụng font awesome danh sách

Sử dụng Font Awesome dạng danh sách

Quay hay đảo ngược Icon

Bằng cách thêm class sau đây vào trong thẻ <i> của Font Awesome bạn có thể thay đổi hướng của Icon.

  • fa-rotate-90 : quay 90 độ
  • fa-rotate-180 : quay 180 độ
  • fa-rotate-270 : quay 270 độ
  • fa-flip-horizontal : đảo ngược icon theo trục ngang
  • fa-flip-vertical : đảo ngược icon theo trục dọc

Dưới đây là mẫu code ví dụ :

Kết quả trông sẽ như thế này :

sử dụng font awesome thay đổi hướng Icon

Thay đổi hướng Icon

Tạo hiệu ứng Animation cho Icon

Bạn có thể làm cho icon xoay liên tục hay xoay 8 bước bằng cách thêm class dưới đây vào thẻ <i> của Font Awesome.

  • fa-spin : quay icon
  • fa-pulse : quay icon 8 steps
Họ Icon chuyên dùng để quay gọi là 「Spinners」.Mình có để link danh sách Icon họ 「Spinners」dưới đây.

 

Hiển thị Icon bằng Float

Sử dụng dấu ngoặc đầu văn bản thể hiển đoạn trích dẫn rất đơn giản khi bạn sử dụng Font Awesome.Cũng như ở trên bạn chỉ cần thêm class tương ứng vào thẻ <i> của Font Awesome là được.

  • fa-pull-left : float:left
  • fa-pull-right : float:right
sử dụng font awesome trích dẫn văn bản

Trích dẫn văn bản

Gắn border cho Icon

Bạn hãy thêm class vào thẻ <i> của Font Awesome để tạo border bao bọc xung quanh Icon.

sử dụng font awesome thêm border cho icon

Thêm Border cho Icon

Kết luận

Sử dụng Font Awesome không hề khó mà hiệu quả nó mang lại thì thật tuyệt vời.Hi vọng với chia sẻ của mình trong bài viết này bạn sẽ sử dụng thành thạo Font Awesome và tạo ra những website thật đẹp.

Hiện nay ngoài Font Awesome còn có rất nhiều loại Icon Font khác nữa.Mình sẽ giới thiệu đến các bạn cách sử dụng những loại font như vậy trong thời gian tới.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
1 Comment
Cũ nhất
Mới nhất Voted nhiều nhất
Inline Feedbacks
View all comments
TienDung
TienDung
1 tháng trước

Rất chi tiết, nhìn chung cũng dễ sử dụng nhỉ

1
0
Hãy cùng thảo luận về bài viếtx
()
x