Sử dụng Font Awesome để tạo icons trong Blogspot Blogger

Su dung Font Awesome de tao icons trong Blogspot Blogger

Font icons đã trở thành một thành phần rất quan trọng của một trang web. Và icons của Font Awesome có thể nói là phổ biến nhất hiện nay. Trong bài viết này mình chia sẻ đến bạn cách sử dụng nó trong Blogspot – Blogger.

Ứng dụng icons thường gặp mà bạn thấy trên các website là thanh menu, icons demo, download, icons bình luận, lượt xem, icon tìm kiếm,…. vâng vâng và mây mây, quá nhiều đúng không nè.

Blogspot – Blogger cũng không phải là một ngoại lệ, nó được sử dụng trong thiết kế template (theme). Và để sử dụng được font này trên Blogspot thì đầu tiên bạn cần khai nhúng font trước thẻ <head> của Template.

Minh hoa ve cach nhung font Awesome trong template Blogspot

Cú pháp để nhúng như dưới đây, trong đó phiên bản font lúc mình dùng đang là 4.7 | Khi bạn dùng thì có thể là phiên bản cao hơn.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Như vậy là xong phần nhúng font vào Template rồi bạn nhé, giờ để sử dụng nó thì bạn thực hiện như dưới đây. Ví dụ ở đây mình muốn tạo một cái icon cho mục Home (Trang chủ) trên thanh menu của website:

Vi du them icon cho muc Home tren thanh menu

Thì lúc này cái mục Home trong Template bạn sẽ sửa lại như đoạn code dưới đây, rong đó mã biểu tượng home mình tra được là: fa fa-home và tương tự cho các icons khác bạn tham khảo mã của nó tại thư viện Font Awesome.

<a class='w3-bar-item w3-button w3-padding-large w3-white' href='#'><i class='fa fa-home'/> Home</a>

Cũng đơn giản đúng không nào ? Như vậy là mình vừa chia sẻ xong cách sử dụng Font Awesome để tạo icons trong Blogspot Blogger rồi đấy. Nếu bạn có điều gì thắc mắc hoặc đóng góp ý kiến thì để lại bình luận bên dưới nhé, cảm ơn bạn !