Header ads

Hướng dẫn chèn các Icon siêu chất cho blogspot

Trên mỗi blog đều có rất nhiều icon, tuy nhiên những bạn làm blog không phải ai cũng biết rõ và nhất là có thể tùy biến để chèn được các icon này theo ý của mình

Một kiểu icon hình trái tim cùng các tùy biến tăng giảm kíc thước của nó



Các icon tích hợp vào thành menu bar trên blog


1-Cài font Awesome Icons

Trước tiên, để chèn được các icon này các bạn phải cài font Awesome Icons cho blog của các bạn. Để chèn vào thì các bạn có thể search trên mạng để xem hướng dẫn. Th ường thì các bạn để lấy code của file css rồi chèn vào trong thẻ <head>......</head> là xong thôi. Code này tương tự như sau

 <script src="https://use.fontawesome.com/000aaaa000.js"></script>


Tuy nhiên các bạn cũng không phải quá lo lắng khi hầu hết các mẫu theme blogger sau này từ 2018 trở lên, đã có tích hợp bộ font này sẵn rồi nên các bạn không cần phải cài vào nữa


2-Cách sử dụng

Sau khi các bạn đã chắc chắn blog của mình đã có font này rồi. Các bạn có thể chèn vào các vị trí thích hợp trên bài đăng, side bar, thanh điều hướng, trang tĩnh, ...

Các bạn vào trang có chứa các list icon này, rồi chọn biểu tượng mình mong muốn Sau đó tìm thấy code chèn vào tương tự như sau:

 <i class="fa fa-icon-name" aria-hidden="true"></i>

Ví dụ code :
<i class="fa fa-twitter" aria-hidden="true"></i>
sẽ có biểu tượng như sau:
Nếu các bạn muốn chèn thêm link vào thì có thể dùng code sau:

 <a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>

Lúc này bạn sẽ được một Icon của facebook như vậy:
Tham khảo thêm một số icon siêu chất như sau





Để làm cho các icon này sinh động các bạn cũng thể thêm các tùy biến như sau:

-Tăng kích thước Iccon

Để thay đổi kích thước icon bạn có thể đặ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

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

Các bạn có thể trình bày dạng list dạng như sau:

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>


Sử dụng icon động

Cái này cũng hay nè. Bạn có thể sử dụng để gây chú ý nhiều hơn đối với đọc giả hoặc sử dụng nút loading... cho blog mình cũng tiện, vừa nhẹ vừa dễ sử dụng. Bằng cách thêm fa-spin sau tên icon để có icon 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 động các bạn có thể sử dụng đoạn code sau:

<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
<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>


 Xoay icon theo các góc khác nhau

Bạn cũng có thể xoay icon ở nhiều góc độ khác nhau. Dưới đây là các ví dụ kèm đoạn mã phía sau nó.
 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 icon-flip-vertical
Bạn có thể tham khảo đoạn code sau
<i class="fa fa-shield"></i> normal<br>

<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>

<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>

<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>

<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>

<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
full-width

Ý Kiến- Bình Luận

2 Comments

Hãy cho biết ý kiến của các bạn ở đây