[Thủ thuật] Sử dụng Font Awesome chèn icon trang trí bài viết cho blogspot cực đẹp

Blogger Thủ thuật

{ 8 comments }

Sau khi thay đổi giao diện và sử dụng thêm các icon Font Awesome để trang trí cho bài viết cũng như dùng icon Font Awesome để trang trí cho giao diện thêm bắt mắt mình đã nhận được khá nhiều câu hỏi xoay quanh vấn đề này.

Font Awesome for blogspot

Font Awesome for blogspot

Vấn đề đặt ra khi sử dụng các icon để trang trí bài viết và giao diện đó là làm sao để thiết kế bắt mắt nhưng vẫn giữ được tốc độ load trang nhanh. Nếu thêm quá nhiều hình ảnh thì tốc độ tải trang sẽ tăng lên đáng kể, điều đó sẽ làm cho website của bạn có thể bị tụt hạng trong kết quả tìm kiếm của google. Và mình đã chọn Font Awesome như một giải pháp thay thế.

Để xem demo các bạn có thể nhìn ngay phần Meta trên bài viết này (Phần hiển thị Tác giả, ngày đăng, bình luận và các tags của bài viết hoặc để ý các icon mà mình sẽ sử dụng trực tiếp trong bài viết.

Xem thêm  Thêm mô tả tìm kiếm cho bài viết trong Blogger – Blogspot

Thêm icon Font Awesome vào blogspot như thế nào?

Để thêm icon Font Awesome vào blogspot cực kì đơn giản.

Bước 1. Đăng nhập vào phần quản lý blogspot tại blogger.com chọn blog mà bạn muốn thêm icon Font Awesome.

Bước 2. Chọn Mẫu (Template) —> Chỉnh sửa HTML (Edit HTML) tìm đến đoạn code:

   1:  head>

Thêm dòng này vào bên trên:

   1:  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Bây giờ các bạn hãy viết một bài mới sau đó thử chèn đoạn code sau vào

   1:  <i class="fa fa-download">i> fa-download

 Kết quả là: fa-download
Nhưng nếu icon này mà sử dụng thì hình như hơi bé. Nếu mục đích sử dụng cho việc thiết kế giao diện nữa thì các bạn cần những icon lớn hơn một chút. Vậy làm sao để những icon này có kích cỡ lớn hơn? Font Awesome cung cấp cho bạn nhiều kích cỡ khác nhau là:

   1:  fa-lg
   2:  fa-2x
   3:  fa-3x
   4:  fa-4x
   5:  fa-5x

Chúng ta hãy cùng thử một demo nhé:

Code:

   1:  class="fa fa-download fa-lg"> fa-download lg
   2:  class="fa fa-download fa-1x"> fa-download 1x
   3:  class="fa fa-download fa-2x"> fa-download 2x
   4:  class="fa fa-download fa-3x"> fa-download 3x
   5:  class="fa fa-download fa-4x"> fa-download 4x
   6:  class="fa fa-download fa-5x"> fa-download 5x

 Kết quả:
fa-download lg
fa-download 1x
fa-download 2x
fa-download 3x
fa-download 4x
fa-download 5x
Các bạn không nhất thiết là phải sử dụng thẻ i có thể sử dụng thẻ b, p, div, table…. miễn là phải có class=”fa fa-xxxx fa-size” trong đó fa-xxxx là tên icon Font Awesome fa-size là kích cỡ. Ngoài ra các bạn cũng có thể quay dọc, quay ngang, quay tùm lum icon tùy ý của bạn bằng cách sử dụng thêm class fa-rotate-90 vào sau. Số 90 có thể thay bằng 180, 270…

Xem thêm  8 lưu ý trước khi quyết định viết blog

Tôi có thể xem thêm ví dụ về icon Font Awesome ở đâu?

Các bạn có thể xem thêm ví dụ về Font Awesome tại đây

Làm sao để biết các mã icon tôi muốn dùng?

Đơn giản lắm. Các bạn chỉ cần truy cập vào trang Font Awesome Cheatsheet và tìm mã của icon mình muốn dùng.
Mẹo nhỏ: Hãy truy cập vào trang Font Awesome CheatSheet bên trên và nhấn ctrl+f sau đó gõ thử một vài icon mà bạn vẫn thấy như downlad, clock, calendar… để tìm icon mong muốn

Sử dụng Font Awesome có ảnh hưởng đến tốc độ tải trang web?

Tất nhiên là có nhưng nó sẽ giảm thiểu tối đa kích cỡ trang của bạn. Thay vì load những hình ảnh nặng nề và mất công ngồi viết css thêm icon và tính toán thì các bạn có Font Awesome để ăn sẵn rồi 😛
Để thực tế hơn chúng ta sẽ cùng sử dụng công cụ kiểm tra tốc độ trang là Tools.Pingdom.Com để kiểm tra tốc độ trang web.
Mình thiết lập phần test trên tools.pingdom.com lấy server là New York City và sau khi kiểm tra thì website đạt điểm 87/100(một mức điểm khá cao) so với một theme mà mình kiểm tra trước đó thì chỉ chậm hơn 2 điểm tức là trước đây mình đã thử một theme khác và đạt 89/100.

Check Page Speed

Kiểm tra tất cả các thông số sau khi test thì khi sử dụng Font Awesome blog của mình phải tải thêm 2 file là font-awesome.cssfontawesome-webfont.woff?v=4.0.3 với kích cỡ lần lượt là 5.2kb43.9kb như vậy cũng không phải quá nặng nề đúng không nào?

Xem thêm  Tìm hình ảnh miễn phí với Google Advanced Image Search

Trên đây là cách sử dụng Font Awesome để thêm icon trang trí cho bài viếtthiết kế giao diện.
Ngoài ra các bạn cũng có thể tham khảo một bài viết khác cũng khá thú vị cho blogspot là Tạo Sitemap đẹp cho blogspot với hình thumbnails
Nếu có bất kì thắc mắc nào các bạn có thể comment dưới bài viết hoặc sử dụng form liên hệ để gửi mail cho mình nhé!

Góp ý cho Tô Triều

  • Doan Duc Long nếp men 25/03/2014, 11:01

    bài này chất đó bác sao giờ mình mới biết nhỉ? hihi

    Reply
    • Tô Hải Triều 25/03/2014, 11:18

      Lâu lắm rồi bác. Từ thời em còn sử dụng Blogspot

  • Tugumi 15/02/2014, 21:51

    Ngoài lề một chút, có thể thêm các đoạn mã vào html rồi khi viết bài mình chỉ cần gõ 1 đoạn ngắn như : ) =-)) là ra icon mặt cười không a? Copy từng link ảnh rồi paste vào thì hơi vật vã ><

    Reply
    • Tô Hải Triều 16/02/2014, 08:04

      Có em ạ. Anh sẽ có một bài hướng dẫn riêng.

  • Tugumi 11/02/2014, 08:43

    Font này có hiển thị đầy đủ trên các máy và điện thoại k a?

    Reply
    • Tô Hải Triều 11/02/2014, 09:42

      Có chứ em. Font Awesome hỗ trợ đầy đủ trên mọi thiết bị di động và máy tính

  • Phạm Hữu Dư 12/11/2013, 09:35

    E vẫn chưa hình dung ra đc, bác có thể cho e xem demo online hoặc trực diện hơn đc ko 😛

    Reply
    • Tô Hải Triều 12/11/2013, 10:00

      Demo online là hình trong bài viết đó bác. Còn nếu bác chèn vào giao diện thì chỉ thêm cái fa fa-xxxx vào sau mỗi class của các phần tử thôi. VD class đang là class=”main” thì khi thêm bác sẽ thêm class=”main fa fa-xxx” trong đó xxx là tên của các icon. Còn nếu ko thì dùng thẻ i như trong bài viết vậy.