Itea.vn Download Phần Mềm - Tài Liệu Học Full - Miễn Phí - Không Quảng Cáo

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

Chèn Icons vào website thông thường các bạn sử dụng hình ảnh có định dạng PNG không có nền, điều này làm nặng trang web nên hôm nay mình sẽ hướng dẫn các bạn cách chèn Icons 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, website nhẹ

Cách chèn Icon cho ánh sáng

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

Biểu tượng phông chữ – Font Awesome thường được gọi là Biểu tượng phông chữ đây là một ký tự mẫu được gọi là Biểu tượng bạn sẽ thấy những phông chữ này trong MS Office.

phông chữ tuyệt vời
Phông chữ tuyệt vời

Vậy làm thế nào để chèn Icon với font Awesome? Chúng ta hãy xem phần tiếp theo.

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

Để có thể chèn Biểu tượng vào trang web của mình, bạn cần thực hiện một số thao tác sau:

Tải game crack việt hoá tại: https://daominhha.com

Bước 1: Mã thư viện của Cup of Font Awesome

Ở bước này bạn phải xác định xem trang web 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ỉ cần tải Plugin Font Awesome tại đây là có thể sử dụng được.

Cài đặt plugin phông chữ tuyệt vời
Cài đặt plugin phông chữ tuyệt vời

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

Mã nguồn khác:

Đối với mã nguồn khác, hãy thêm mã lệnh gọi thư viện Font Awesome sau đây trước khi đóng . nhãn

Ghi chú: Đối với mã nguồn wordpress bạn không muốn sử dụng plugin nữa, bạn cũng có thể thêm mã gọi thư viện trước khi đóng nhãn.

Bước 2: Tìm kiếm các biểu tượng trên trang web Font Awesome

Tiếp theo, hãy truy cập trang web https://fontawesome.io. Tại đây bạn có thể truy cập tab Biểu tượng.

Truy cập vào tab Biểu tượng
Truy cập vào tab Biểu tượng

Có 2 loại Biểu tượng dành riêng cho người dùng:

  • Miễn phí miễn phí
  • Chỉ chuyên nghiệp: Thanh toán

Sử dụng nó theo ngân sách của bạn. Đối với tôi, Miễn phí là đã có thể sử dụng được. Vui lòng kiểm tra phần Thẻ miễn phí trước.

Chọn chế độ biểu tượng
Chọn chế độ biểu tượng

Tiếp theo, tìm từ Key biểu tượng bạn muốn chèn vào trang web trong ô Tìm kiếm 7.865 biểu tượng cho….

Sau khi điền bạn sẽ nhận được danh sách các biểu tượng, hãy chọn biểu tượng bạn thích và nhấn vào đó.

Biểu tượng tìm kiếm trên Phông chữ tuyệt vời
Biểu tượng tìm kiếm trên Phông chữ tuyệt vời

Bây giờ trang web sẽ tải biểu tượng này, chọn Start sử dụng biểu tượng này

Chọn sử dụng biểu tượng
Chọn sử dụng biểu tượng

Bạn sẽ nhận được một cửa sổ popup hiện lên, hãy sao chép mã HTML để chèn vào trang web.

Sao chép mã của biểu tượng
Sao chép mã của biểu tượng

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

Trước hết, Lưu ý: Đây là biểu tượng Phông chữ chỉ nhận được trong ngôn ngữ HTML. Nếu bạn sử dụng wordpress hay bất kỳ trình soạn thảo nào, vui lòng chuyển sang trình soạn thảo HTML

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

Vui lòng viết nội dung trên cùng một dòng với biểu tượng đã chèn và chọn biểu tượng dấu 3 chấm => Chỉnh sửa dưới dạng HTML

Chuyển đổi khối để chỉnh sửa dưới dạng html
Chuyển đổi khối để chỉnh sửa dưới dạng html

Lúc này dòng này sẽ chuyển sang dạng Code html. Tìm vị trí bạn cần gán biểu tượng này và dán mã đã sao chép ở bước 2 vào đây.

Dán mã biểu tượng vào HTML
Dán mã biểu tượng vào HTML

Sau đó cập nhật và xem kết quả

Kết quả sau khi chèn Font biểu tượng tuyệt vời
Kết quả sau khi chèn Font biểu tượng tuyệt vời

Đối với phần Tiện ích (khối văn bản):

Vui lòng chọn mục văn bản trên tiện ích mở rộng và sao chép, dán mã này để hiển thị biểu tượng bên ngoài. Bạn nên viết nội dung trước và chọn mục văn bản để sao chép. Sau khi hoàn tất, chọn Đã lưu.

Chèn phông chữ biểu tượng tuyệt vời

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

Vui lòng chuyển đổi sang định dạng HTML và dán mã vào và Biểu tượng sẽ xuất hiện.

Trên đây là hướng dẫn cách chèn Icons vào website bằng Font Awesome iTea.vn hướng dẫn cho bạn. Hy vọng bài viết này đã giúp bạn có được những Icons đẹp nhất trên website. Chúc may mắn