Chèn Icon đẹp vào Web với Fontawesome 06/09/2014

Chèn Icon đẹp vào Web với Fontawesome

Font icon là gì? Font icon là những bộ font mà các ký tự trong bộ font đó là những biểu tượng, trong máy bạn nếu cài Windows thì chắc chắn đã có sẵn một vài Font icon như các font: Wingdings, Symbol, …. Thay vì chứa các ký tự A, B, C … thì những bộ font như vậy lại chứa những hình ảnh ký tự.
 
Chèn Icon đẹp vào Web với Fontawesome
 
Fontawesome cũng là một Font icon như mình vừa trình bày. Số lượng icon trong bộ font này khá khủng, mà tất cả đều được thiết kế rất tỉ mỉ. Từ khi có CSS3, việc chèn font ngoại vào Web đã trở nên đơn giản rất nhiều. Đặc biệt nhà phát triển Fontawesome còn tạo sẵn các tên class tương ứng với những Icon và đặt vào một file thư viện CSS để chúng ta có thể sử dụng một cách thuận tiện.
 

Cài đặt FontAwesome …

Cách cài đặt vô cùng đơn giản, nếu bạn từng đọc qua bài hướng dẫn sử dụng Bootstrap của Minh Nhựt thì việc cài Fontawesome vào bản thiết kế Web của bạn cũng khá tương tự như Bootstrap.

Đầu tiên bạn cần vào đây tải bộ thư viện về:

http://fontawesome.io

Trong đây bao gồm các tệp tin:

  • 2 file Css. Một file được nén, và một file không nén (dùng để phát triển)
  • thư mục fonts, chứa các Font icon sẽ được dùng

Sau khi tải về. Chúng ta sẽ tiến hành tạo thử một file .html và dùng thử thư viện này. Mình tạo một file index.html với nội dung như sau:
 

<head>
    <title>Sài thử Fontawesome</title>
    <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
</head>
<body>
    <h1><i class="fa fa-flag"></i> Chào Fontawesome</h1>
</body>
</html>

Chạy thử file index.html trên, nhớ là đặt nó cùng với thư mục css, fonts giải nén từ fontawesome nhé. Nếu đúng bạn sẽ thấy một biểu tượng lá cờ cạnh dòng chữ “Chào Fontawesome”. Xét nội dùng, ở file html trên, bạn dễ dàng thấy mình đã chèn icon bằng đoạn code:
 
<i class="fa fa-flag"></i>

Làm sao mà mình biết cách chèn icon lá cờ như vậy, mời bạn cùng xem tiếp.

Hướng dẫn chèn icon

Chèn Icon đẹp vào Web với Fontawesome
 
Nhìn lại đoạn code chèn icon ở trên, chúng ta sẽ có cấu trúc để chèn một icon như sau:
 
<i class="fa [tên icon]"></i>

Phần còn lại giữ nguyên, chỉ cần thây đổi phần [tên icon] là chúng ta sẽ có một icon mới. Cách tìm tên của icon như sau, truy cập vào địa chỉ: http://fontawesome.io/icons/

Ở đây chứa danh sách các icon theo từng nhóm. Mình sẽ làm ví dụ cụ thể chèn một cái icon.
Giả sử mình muốn chèn icon hình ly ca phê, mình truy cập vào địa chỉ ở trên và rà tìm trong danh sách, và thấy icon hình ly cà phê có tên như hình bên.

Tên icon này là fa-coffee. Vậy để chèn icon này vào web mình sẽ tiến hành chèn đoạn code html như sau vào:

 

<i class="fa fa-coffee"></i>


Bạn có thể thử và sẽ ra kết quả tương tư như hình ly cà phê bên trên. Quá tuyệt phải không nào. Bạn có thể chèn bất kỳ icon nào có trong danh sách trên vào web của mình.

Bộ icon này ngày càng được phát triển và có nhiều icon hơn, bạn nên check thường xuyên để tải về phiên bản mới nhất của Fontawesome để không bỏ sót icon mới nào nhé. Chúc bạn thành công, và chèn được nhiều icon ưng ý vào Web của mình.

Facebook chat