Đầ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
Để 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
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.
0 nhận xét:
Đăng nhận xét