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.
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:
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.
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.
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.
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 đó.
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
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.
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
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.
Sau đó cập nhật và xem kết quả
Đố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.
Đố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
Xem Chi Tiết Ở Đây >>>
Bạn có thể quan tâm:
>> Top 20 đồ gia dụng nhà bếp thông minh giúp nấu ăn dễ dàng
>> Top những món đồ chơi công nghệ được ưa chuộng nhất
>> Trên tay Galaxy A52 5G: Phiên bản nâng cấp với màn hình 120 Hz, chip Snapdragon 750G và thiết kế không đổi
0 comments:
Post a Comment