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.
About Hong Cuong :
Theo dõi tôi trên:
){kind=link}
0 nhận xét:
Đăng nhận xét