Hướng dẫn sử dụng Font Awesome cho Blogspot (blogger)

Hướng dẫn sử dụng Font Awesome cho Blogspot
Font Awesome mình chỉ nói tóm lại 1 câu là một thiết kế tuyệt vời cho các Blog/Website. Hầu như các webmaster đều sử dụng các biểu tượng này để tăng tính thẩm mỹ của blog/website của họ và gây hứng thú cho người dùng, những biểu tượng này ngày càng được được sử dụng phổ biến hơn. 




Một hỏi mà mình thường hay gặp nhất: Tại sao không sử dụng hình ảnh để thay thế các biểu tưởng Font Awesome ?

Đây là câu trả lời Awesome. Các biểu tượng này tải với tốc độ nhanh gấp 10 lần so với các ảnh PNG hoặc các tập tin hình ảnh khác giảm tối thiểu số lượng yêu cầu HTTP tải hình ảnh trên blog của bạn. Nó giống như một đoạn văn bản trong blog/Website của blog, Ngoài ra nó có độ phân giải cao từ đó đêm lại một cái mình tuyệt vời cho blog/website của bạn.

Hướng dẫn cách cài đặt biểu tượng này trên Blog của bạn và cách tùy biến biểu tượng này bằng CSS.

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn <head> Sau đó thêm đoạn code dưới đây phía dưới thẻ <head>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Đây là một đoạn CSS nó sẽ làm giảm tốc độ load của blog của bạn, đây là cách khắc phục: 


Mình thường gắn các biểu tượng này vào các liên kết chuyển được đặt biệt là các các thanh menu: Thường nằm trong 1 thể mở <i> và 1 thể đóng </i>. Dưới đây là 2 Ví dụ: Biểu tượng cho trang chủ và biểu tượng liên hệ.

<li><a href='http://www.windowns2it.com'><i class='fa fa-home'></i>Home</a></li>
<li><a href='http://www.windows2it.com/p/contact-us.html'><i class='fa fa-envelope-o'></i>Contact Us</a></li>
Để thay đổi/ sử dụng bạn chỉ cần thay thế tên biểu tưởng ở phần màu vàng <i class='fa fa-home'></i> Các biểu tượng này được cập nhật đầy đủ TẠI ĐÂY:


Tùy biến các biểu tượng với CSS

Để tùy chỉnh màu sắc, kích thước hay tạo bóng cho các biểu tượng, chỉ cần gọi lệnh <i> trong CSS.

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn ]]></b:skin> Sau đó thêm đoạn code dưới đây phía trên thẻ ]]></b:skin>

i {
    color:#E2FD18;
    font-size:15px;
    padding-right:5px;
    text-shadow: 1px 1px 1px #000;
}
>>>> Với cách này bạn sẽ chỉnh sữa hết các biểu tượng cùng một lúc

Còn bạn chỉ muốn làm hiệu ứng cho một biểu tượng cụ thể thì sử dụng lệnh này. Dưới đây là Ví dụ:

<i class='fa fa-heart' style='font-size:18px; color:red;'/>
>>>> Sau khi bạn áp dụng thì: Kích thước biểu tượng của bạn là 18px và màu biểu tượng của ban là màu đỏ.

Kết luận

- Chỉ với một thủ thuật nho nhỏ đã làm Blog/Website của bạn trở nên sinh động hơn rất nhiều.

- Cứ để lại comment nếu bạn nào chưa rõ@! Windows2it sẽ giải đáp hết mình.
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

6 nhận xét:

  1. Có phải thủ thuật này chỉ cần chèn hai đoạn code vào HTML không a. Còn những phần kia em không hiểu.
    Em cài rồi những không được.

    ReplyDelete
  2. Đúng vậy thủ thuật này đoạn CSS và trong template ... Chỗ nào ko hiểu bạn lấy ví dụ cụ thể được ko :)

    ReplyDelete
    Replies
    1. Chỗ Loại bỏ JavaScript và CSS chặn hiển thị của blogspot (blogger), em không hiểu cách làm khoảng đó a. :)

      Delete
    2. mình có hướng dẫn mà Bạn

      Delete
  3. Replies
    1. Bạn cứ đặt câu hỏi .. khi nào online mình sẽ trả lời !! :)

      Delete