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 !
Tính ra những website về thiết kế, đồ họa, thương mại điện tử hoặc những lĩnh vực cần sinh động, màu mè một chút thì dùng font-awesome rất tiện, dễ tùy biến. Chứ mấy website chia sẻ thông tin tổng hợp đơn thuần, không quá màu mè thì sử dụng nhiều hình ảnh (icon) sau đó gộp lại lại 1 hình ảnh rồi dùng cũng được. Cho nhẹ web!
Hí Anh, Google đưa em đến đâyy
Cảm ơn Google phát nào :v
Bác dùng thử phiên bản 5.0 chưa có gì khác không nhỉ?
Vâng bác, để em thử thử, cái này hôm trước học Blogspot em nghịch thử 😀
Oke bác! :3