Font Awesome – tiện ích tuyệt vời trong thiết kế giao diện website

Khi thiết kế giao diện website không thể thiếu icon làm đẹp cho web, tuy nhiên nếu bạn không biết sử dụng các phần mềm đồ họa để tạo thì Font Awesome sẽ giúp bạn giải quyết vấn đề này. Với hơn 1.019 icon hoàn toàn miễn phí, rất dễ dàng để tích hợp vào website cũng như sử dụng chúng, công việc của bạn bây giờ là lựa chọn icon và copy paste.

Ưu điểm của Font Awesome:

Miễn phí với 1.019 icon (quá nhiều cho bạn lựa chọn làm đẹp website)

Thường xuyên cập nhật các icon mới

Tốc độ load trang nhanh hơn rất nhiều so với việc bạn dùng hình ảnh

Không bị bể kích thước trên mọi giao diện: mobile, tablet, destop

Dễ dàng thay đổi màu sắc, kích thước cho từng icon bạn sử dụng

Quan trọng nhất là bạn không mất nhiều thời gian cho việc ngồi thiết kế icon

 

Xem qua demo khi sử dụng

  –   – 

Tích hợp Font Awesome vào website như thế nào ?

Để tích hợp Font Awesome vào website bạn chỉ cần chèn code sau vào trong thẻ <head>:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  Hoặc bạn tải bộ source về sau đó giải nén, copy vào project  bạn đang làm  và chèn  code sau vào trong thẻ <head>:

<linkhref="fontawesome/fontawesome-all.css" rel="stylesheet">
 Note: fontawesome là thưc mục chứa bộ source fontawesome bạn mới tải về.

Sử dụng Font Ausome như thế nào?

Rất đơn giản, bạn chỉ cần truy cập vào website https://fontawesome.com/icons?d=gallery&m=free ,  chọn icon yêu thích và copy code class CSS của nó dán vào trong code web là xong. Code class CSS nằm trong thẻ <i class=”fab “></i>

vd: <i class=”fab fa-angellist”></i>

Ngoài ra còn rất nhiều tính năng phát triển bạn có thể tự khám phá thêm. Nhưng đối với nhu cầu làm website hiện nay thì tính năng cơ bản của Font Ausome đã đáp đáp ứng đầy đủ.

Hãy để lại bình luận bên dưới nếu bạn cần hỗ trợ. Chúc các bạn thành công

HÃY CHIA SẺ NẾU BẠN THẤY THÍCH BÀI VIẾT


Bài viết cùng chuyên mục

Bình luận của bạn

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *