Font Awesome sự lựa chọn hoàn hảo cho Blogger

Đầu tiên chắc là nhiều người sẽ không biết Font Awesome là gì, do đó mình sẽ giải thích trước. Font Awesome là thư viện cung cấp cho bạn hàng ngàn icon có thể dễ dàng tùy chỉnh mọi thứ bằng css như kích cỡ, màu, bóng đổ, v.v.. Mặc dù có nhiều ưu điểm cực kì hấp dẫn (icon nhìn tốt ở mọi kích cỡ, tốc độ tải cực lẹ,..), nhưng bạn có thể sử dụng nó một cách hoàn toàn miễn phí. Bài viết này mình xin giới thiệu đến các bạn cách sử dụng Font Awesome trên nền tảng miễn phí Blogger.

Font Awesome sự lựa chọn hoàn hảo cho Blogger

Font Awesome sự lựa chọn hoàn hảo cho Blogger

Để thêm Font Awesome cũng đơn giãn như mọi thủ thuật nhỏ khác, chỉ cần một vài bước như sau:
Bước 1: Cài đặt vào Blogger
Đầu tiên bạn hãy đăng nhập vào Blogger của mình, chọn website mã bạn muốn thêm vào, sau đó tìm đến và truy cập vào Mẫu » Chỉnh sửa HTML , ở đây tiếp tục tìm đến thẻ <head> và thêm đoạn mã này xuống dưới nó
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Bước 2: Sử dụng Font Awesome
Các bạn hãy chọn trong một trong cả đống icon mà bạn thích tại địa chỉ website sau đây http://fontawesome.io/icons
<i class="fa fa-camera-retro"></i> fa-camera-retro
sau khi chọn được một icon ưng ý, bạn chỉ cần thay thế đoạn mã mình đánh dấu ở trên trong class bằng cái tên mà bạn đã chọn để hiển thị nó trên blog, ví dụ như ở đoạn mã trên mình chọn cái hình camera đoạn ở trên sẽ được

fa-camera-retro

Bước 3: Tùy chỉnh nó bằng css
Bạn có thể thêm đoạn css sau để thay đổi icon ở trên
.fa-camera-retro {
   font-size:20px;
   font-weight:bold;
   color:#111;
   border:1px solid #111;
   padding:10px;
   float:left;
}
đoạn css trên mình đã căn chỉnh kích thước, độ dày, màu sắc và nhiều thứ khác cho icon mình đưa vào ở trên.
Lưu ý: Còn rất nhiều tùy chỉnh khác
Do bài viết này mình chỉ muốn dừng lại ở mức độ giới thiệu nó cho các bạn thôi, tại nếu mà hướng dẫn đầy đủ về các class thì rất là dài, các bạn có thể tham khảo toàn bộ những tùy chỉnh ở trang của nhà cung cấp http://fontawesome.io/examples , việc đơn giản chỉ chọn hiệu ứng cần và thêm những class được tạo sẵn vào thẻ i thôi.

Hiện nay, Font Awesome được sử dụng rất nhiều tại nhiều website vì không những tốc độ tải trang không giảm mà còn vô số tùy chỉnh mà nó mang lại cho người sử dụng. Rất mong rằng bài viết này giúp ích được cho tất cả các bạn, các bạn có thể để lại ý kiến riêng của mình tại phần nhận xét phía dưới.

10 bình luận

  1. avatar says

    lúc 13:50 6 tháng 9, 2014

    Mình download 1 page HTML5 trên google về, khi bật chạy local thì icon xuất hiện bình thường, sau đó upload thử lên host thì nó tịt luôn, nghĩa là các icon này không xuất hiện, mình tưởng do lỗi URL, nên trỏ nguyên mẫu URL vẫn không được, tác giả gặp chưa? nếu rồi mong hướng dẫn nhé - thanks

    Demo - page hỏng icon: http://hoasenvang.com.vn/can-dien-tu.html

  2. avatar says

    lúc 14:06 6 tháng 9, 2014

    Em kiểm tra trang của anh thấy cũng lạ thật, anh thử cách này nhé, sử dụng CDN trên server của nó luôn khỏi phải up lên host chỉ cho mệt. Đầu tiên thử nghiệm trước nhé em thấy anh chèn dư, anh vào tìm và xóa đoạn mã này trên thẻ head
    <link rel="stylesheet" href="http://hoasenvang.com.vn/assets/font-awesome/css/font-awesome.css">
    sau đó refresh lại page thử xem nó có hiện ra không
    nếu nó không hiện, anh tiếp tục tìm và thay thế đoạn mã sau đây
    <link rel="stylesheet" href="http://hoasenvang.com.vn/assets/font-awesome/css/font-awesome.min.css">
    bằng
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    rồi báo em biết nhé.

  3. avatar says

    lúc 21:32 6 tháng 9, 2014

    Chuẩn Quá Lâm Kiều, Mình đã thay thế đoạn mã sau đây : //font-awesome.min.css
    -- bằng đoạn code như @Lâm Kiều : //maxcdn.bootstrapcdn

    * Kết quả là nó xuất hiện icon trở lại, sao lại lạ vậy nhỉ - local chạy - nhưng upload thì tịt - nhưng thôi chạy là ok rồi, hy vọng font-awesome ko đóng cửa quá sớm để buồn. Thanks Lân Kiều về support này nhé. cuối tuần vui vẻ !

  4. avatar says

    lúc 21:36 6 tháng 9, 2014

    Một framework lớn như thế chắc không dễ gì đóng cửa được đâu :D

    Thanks anh, cũng chúc anh cuối tuần vui vẻ :)

  5. avatar says

    lúc 16:44 7 tháng 12, 2014

    Thưa anh, em chèn cái mã này vào sau đó lưu thì nó báo lỗi như thế này http://i.imgur.com/v5GO1hB.png
    Nhờ anh giúp em với ạ.

  6. avatar says

    lúc 16:45 7 tháng 12, 2014

    em thêm dùm anh dấu / ở trước > cuối cùng nha

  7. avatar says

    lúc 16:56 7 tháng 12, 2014

    Anh đúng là người rất tận tâm vì công việc của mình, em vừa mới hỏi thì đã có câu trả lời rồi. Em cảm ơn anh!

  8. avatar says

    lúc 13:19 23 tháng 12, 2014

    Có mấy trăm icon thôi, làm j đến hàng ngàn ^^

  9. avatar says

    lúc 18:17 28 tháng 12, 2015

    mình có đoạn http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css bị lỗi css3, xóa luôn thì chuẩn lại, khắc phục sao bạn?
    Blog: toilaquantri.com

  10. avatar says

    lúc 09:01 29 tháng 12, 2015

    Cái này bạn xài CDN của người ta thì chịu thôi, không có cách nào làm được. Nếu bạn muốn sửa lỗi đó thì chỉ có thể down về và tự chỉnh sửa lại css trong đó và selfhost ở đâu đó rồi nhúng về blog của mình. Thân!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.