Font Awesome Icons cho Blogger

Hôm nay Ngọc Quang sẽ giới thiệu các bạn cách xài Font Awesome Icons cho Blogger nhé !!!

Làm cho thanh menu của blog sinh động và hấp dẫn hơn . Mình thích idol Star Tuấn nên cũng theo dõi bài viết của blog đó <3 .

Cách sử dụng Font Awesome Icons này cũng không khó lắm nhé đây là bài viết mình đọc được bên ( Star Tuấn ) thì nó rất hữu ích và hay nữa, ở đây có rất nhiều icon hình ảnh hay đẹp lạ mắt nữa nhé !!!!

Trước tiên là cài đặt font cho Blogspot

Việc đầu tiên các bạn hãy đặt đoạn code sau dưới thẻ </head> :
<link rel ="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
Nếu bạn không muốn có sự cố gì hãy tải lại file css về và up lên host của chính bạn cho dễ quản lý nhé.

Cách sử dụng font Awesome

Để sử dụng font Awesome thì việc đầu tiên là bạn phải năm đc tên icon mà mình muốn thêm vào. Để biết được điều này bạn có thể vào ĐÂY để tham khảo hoặc tìm kiếm ngay trong bài viết này.

Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau

 Bạn sẽ được kết như hình phía trước code

Tiếp theo là phần biến hóa của font Awesome

1. Thay đổi kích thước icon

Ngoài ra các bạn cũng có thể tuỳ biến kích thước bằng các đặt các ký hiệu sau đằng sau tên của icon fa-lg (tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:

<i class="fa fa-download fa-lg"></i> fa-lg
<i class="fa fa-download fa-2x"></i> fa-2x
<i class="fa fa-download fa-3x"></i> fa-3x
<i class="fa fa-download fa-4x"></i> fa-4x
<i class="fa fa-download fa-5x"></i> fa-5x

Và kết quả chúng ta thu được:
fa-lg fa-2x fa-3x fa-4x fa-5x

2. Sử dụng icon động

Loại icon động có vẻ làm thú vị hơn về mọi mặt mà các bạn yêu thích rất nhiều sau đây mình sẽ có một số mẫu

xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:

Để có icon như trên Ngọc Quang sử dụng đoạn code sau:

<i class="fa fa-refresh fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

3. Trình bày dạng danh sách

Trình bày cho các bạn dễ hiểu hơn, đây là một số mẫu icon để các bạn gắn trên thanh menu

Đây là ví dụ nhé :

Bạn cứ xem và xóa đoạn này [ Dán icon mà bạn thích vào đây ví dụ (fa fa-arrow-circle-right) ] thay icon bạn thích vàoCác bạn có thể trình dưới dạng danh sách bằng cách:

List icons
can be used
as bullets
in lists

Bằng mã code sau:

 <ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Vậy thì làm thế nào để tạo icon động đây, các bạn chỉ việc thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước .

4. Đây là một số mẫu icon

Mình sẽ đưa ra một số icon phía dưới cho các bạn thích thì chọn nhé

1<i class="fa fa-rss" aria-hidden="true"></i>

1<i class="fa fa-frown-o" aria-hidden="true"></i>

1<i class="fa fa-sign-in" aria-hidden="true"></i>

1<i class="fa fa-star" aria-hidden="true"></i>

1<i class="fa fa-star-o" aria-hidden="true"></i>

1<i class="fa fa-spinner" aria-hidden="true"></i>

1<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

Bạn nào muốn xem thêm nhiều icon nữa thì ấn vào đây Link