công ty thiết kế website tốt nhất

 

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:
 

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:
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

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:
 
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: