Hướng dẫn cách sử dụng Font Awesome

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.

Web lấy icon tại ĐÂY

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'/>

 Sau khi chèn xong đoạn mã code trên thì bạn có thể vào site mình đã nghi ở trên để lấy đoạn code và chèn trước tên như hình : ))

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;
}

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.

Nguồn: Tuyên MNO.