Chèn Icon vào website bằng Font Awesome – đơn giản mà đẹp trang web

Chèn icon vào website bằng font awesome

Chèn Icon vào website thường bạn hãy sử dụng các hình ảnh dưới chế độ không nền theo định dạng PNG điều này khiến website rất nặng vì thế hôm nay mình sẽ hướng dẫn bạn một cách chèn Icon vào website bằng Font Awesome. Đẹp mà đơn giản không cần thực hiện nhiều thao tác còn nhẹ website

Chèn Icon bằng cách nào cho nhẹ

Thay vì sử dụng các hình ảnh không nền để làm các icon cho đẹp website thì giờ đây bạn không cần phải thực hiện như vậy nữa. Vì đã có một cách khác không chiếm 1kb của website của bạn bằng Font ICon. Đây là giải pháp tối ưu nhất về tốc độ load website và thực hiện nhanh chóng không cần cắt ghép hình

Font Icon – Font Awesome thường được gọi là Font Icon đây là một ký tự mẫu được gợi là Icon bạn sẽ gặp những font này trong MS Office.

font awesome
Font awesome

Vậy làm sao để chèn Icon bằng font Awesome? Hãy cùng xem tiếp phần sau đây nhé.

Hướng dẫn cài đặt Font Awesome trên website

Để có thể chèn được Icon vào website thì bạn cần phải thực hiện một số thao tác sau đây:

Bước 1: Chén Code thư viện của Font Awesome

Ở bước này bạn phải xác định website bạn đang chạy mã nguồn nào? WordPress hay mã nguồn khác?

Mã nguồn WordPress:

Đối với mã nguồn wordpress bạn chỉ việc tải Plugin Font Awesome tại đây là có thể sử dụng được.

Cài plugin font awesome
Cài plugin font awesome

Nếu bạn chưa biết cài plugin trên wordpress thì bạn hãy xem bài viết này nhé. Cài đặt Plugin wordpress như thế nào? Cực dễ cho người mới bắt đầu

Mã nguồn khác:

Đối với mã nguồn khác bạn hãy thêm đoạn code gọi thư việc Font Awesome sau đây vào trước thẻ đóng </head>

<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css” />

Lưu ý: Đối với mã nguồn wordpress bạn không muốn dùng plugin nữa thì cũng có thể thêm đoạn code gọi thư viện vào trước thẻ đóng </head> nhé.

Bước 2: Tìm kiếm Icon trên website Font Awesome

Tiếp theo bạn hãy truy cập vào website https://fontawesome.io Ở đây bạn hãy truy cập vào tab Icon nhé.

Truy cập vào tab Icon
Truy cập vào tab Icon

Ở đây có 2 dạng Icon dành riêng cho người dùng:

  • Free: Miễn phí
  • Pro Only: Trả tiền

Dựa vào kinh phí của bạn mà hãy sử dụng nhé. Đối với mình Free là đã có thể dùng được rồi. Bạn hãy tích vào mục tag Free trước.

Chọn chế độ icon
Chọn chế độ icon

Tiếp tới bạn hãy tìm từ khoá mà icon bạn muốn chèn lên website vào ô Search 7,865 icon for….

Sau khi điền xong bạn sẽ nhận được 1 list icon bạn hãy lựa chọn icon ưng ý và click vào nó nhé.

TÌm kiếm icon trên Font awesome
TÌm kiếm icon trên Font awesome

Bây giờ website sẽ load ra icon này bạn hãy chọn Start Using This Icon

Chọn sử dụng icon
Chọn sử dụng icon

Bạn sẽ nhận được 1 popup hiện lên bạn hãy copy dòng code HTML để chèn vào website.

Copy code của icon
Copy code của icon

Bước 3: Hướng dẫn chèn Icon vào website.

Trước tiên bạn hãy Lưu ý: Đây là Font icon chỉ nhận được trên ngôn ngữ HTML. Nên bạn sử dụng wordpress hay trình soạn thảo nào bạn hãy chuyển qua dạng soạn thảo là HTML

Đối với wordpress phiên bản mới, ở trình soạn thảo:

Bạn hãy viết nội dung chung dòng với icon được chèn vào và chọn icon 3 chấm => Edit as HTML

Chuyển block sang edit as html
Chuyển block sang edit as html

Bây giờ dòng này sẽ chuyển sang dạng Code html. Bạn hãy tìm tới vị trí cần gán icon này và dán mã được copy ở bước 2 vô đây nhé.

Dán code icon vào HTML
Dán code icon vào HTML

Sau đó bạn hãy update và xem kết quả

Kết quả sau khi chèn icon Font awesome
Kết quả sau khi chèn icon Font awesome

Đối với phần Widgets (block text):

Bạn hãy chọn mục text trên phần mở rộng và copy dán code này để để hiển thị icon ra ngoài nhé. Bạn nên viết nội dung trước và chọn mục text hãy copy vào nhé. Sau khi làm xong bạn hãy chọn Saved nhé.

Chèn icon font awesome

Đối với những mã nguồn khác

Bạn hãy chuyển sang dạng HTML và dán code vô là Icon đã hiện lên rồi nhé.

Trên đây là phần hướng dẫn bạn chèn Icon vào website bằng Font Awesome được Ez Lasso hướng dẫn cho các bạn. Hy vọng bài viết này đã giúp bạn có được những Icon đẹp nhất trên website nhé. Chúc các bạn thành công

Lasso
Tôi là Ez Lasso Xin chào! Tôi là Khai còn gọi là "Lasso", người viết website này. Tôi có một đam mê về công nghệ, thiết bị máy tính và mong muốn được chia sẻ cho tất cả mọi người .