Chèn Icon Vào Website Bằng Font Awesome - đơn Giản Mà đẹp ...

WELCOME TO EZLASSO.COM

Website chia sẽ những thông tin về thủ thuật máy tính, công nghệ.

Nếu bạn có thắc mắc về máy tính - công nghệ hãy tìm trên google theo cú pháp: Từ Khoá + Ez Lasso

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

Mục LụcChèn Icon bằng cách nào cho nhẹHướng dẫn cài đặt Font Awesome trên websiteBước 1: Chén Code thư viện của Font AwesomeMã nguồn WordPress:Mã nguồn khác:Bước 2: Tìm kiếm Icon trên website Font AwesomeBước 3: Hướng dẫn chèn Icon vào website.Đối với wordpress phiên bản mới, ở trình soạn thảo:Đối với phần Widgets (block text):Đối với những mã nguồn khác

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.

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.

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é.

Ở đâ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.

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é.

Bây giờ website sẽ load ra icon này bạn hãy chọn Start Using This 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.

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

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é.

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

Đố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é.

Đố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