Hướng dẫn sử dụng Font Awesome lấy icon cho website

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à 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 
Font Awesome ở phiên bản miễn phí 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 bây giờ. Cách sử dụng Font Awesome 5 khác khá nhiều so với phiên bản trước đó.

Nếu bạn 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 cũ.

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 phiên bản Pro bạn sẽ phải trả 99 USD 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 Pro nhé. Còn bạn là cá nhân thì nên dùng bản miễn phí cho tiết kiệm.

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.

Nếu sử dụng CDN bạn có thể dán code vào file HTML cách này đơn giản, còn một cách nữa là tải file Icon lên server rồi tạo đường dẫn vào file HTML.

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 bên dưới vào trong thẻ <head> của file HTML là OK.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

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 Icon trên server bạn có thể download file Icon tại link này. Sau đó bạn tải file này lên server rồi tạo đường dẫn file đó vào trong thẻ <head> bằng thẻ link bên dưới.

<link rel="stylesheet" href="../css/font-awesome.css">

Cách chọn Icon hiển thị


Đầ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 nên chọn những Icon màu đen vì đó là những Icon miễn phí.

Ở menu phía bên trái bạn hãy nhấn chọn 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 của Icon hoặc tên trực tiếp bằng tiếng Anh vào thanh tìm kiếm trên đầu website  Font Awesome. Những Icon liên quan bạn tìm kiếm sẽ hiển thị ra ngay để bạn lựa chọn.

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.


Code được copy sẽ có dạng tương tự như bên dưới. 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.

<i class="fab fa-apple"></i>

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 ý như sau.

<div class="icon"></div>


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.

.icon::before {
content:'\f179';
font-family:'Font Awesome 5 Free'
font-weight:900;
}


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. Đ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ính font-family:’Font Awesome 5 Brands’ thay vì thuộc tính font-family như trên.

.icon::before {
content:'\f179';
font-family:'Font Awesome 5 Brands'
font-weight:900;
}

Cách 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.

<i class="fab fa-apple" style="color:red;"></i>

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

Ngoài việc thay đổi 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.



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.

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.

  • <div><i class="fa-refresh" style="background:DodgerBlue"></i> refresh</div>
  • <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  • <div><i class="fa-arrow-circle-o-down" style="background:DodgerBlue"></i> arrow down</div>
  • <div><i class="fa-volume-off" style="background:SkyBlue"></i>Volume off</div>
  • <div><i class="fa-inbox" style="background:DodgerBlue"></i> inbox</div>

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

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 thẻ <ol> bạn hãy thêm class fa-ul vào thẻ <li> hoặc <span>.

  • <ul class="fa-ul">
  • <li><span class="fa-li" ><i class="fa-refresh" ></i></span>Tải lại trang</li>
  • <li><span class="fa-li"><i class="fas fa-skiing fa-fw"></i></span>Mũi tên</li>
  • <li><span class="fa-li"><i class="fa-arrow-circle-o-down" ></i></span>replace bullets</li>
  • <li><span class="fa-li"><i class="fa-inbox"></i></span>danh sách</li>
  • </ul>

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


<i class="fa-repeat fa-spin"></i>
<i class="fa-repeatr fa-pulse"></i>

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

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>


<p>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.</p>

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.

<i class="fas fa-arrow-right fa-border"></i>


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 phải không nào .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.

Đăng nhận xét

0 Nhận xét