Chúng tôi phải sử dụng các liên kết phông chữ bên ngoài cho các biểu tượng. Áp dụng các biểu tượng trên nút giúp người dùng dễ hiểu chức năng của nút đó
Font Awesome icon in your form is an innovative idea, that will bring attention to your website. It is as simple as applying Font Awesome icon on any button. The tag and tag are used widely to add icons on the webpages. To add any icons on the web pages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon’s name.
Liên kết CDN
https. //cdnjs. đám mây. com/ajax/libs/phông chữ tuyệt vời/4. 7. 0/css/phông chữ tuyệt vời. tối thiểu. css
Thí dụ. Trong ví dụ này, chúng tôi sẽ lấy một biểu mẫu mà nút là cần thiết. Sau đó, chúng tôi sẽ đặt biểu tượng phông chữ tuyệt vời bên trong nút. Chúng tôi sẽ sử dụng liên kết CDN để sử dụng các biểu tượng phông chữ tuyệt vời. Sau nút, chúng tôi sẽ đặt biểu tượng của chúng tôi
Chào mừng bạn đến với hướng dẫn dành cho người mới bắt đầu về cách thêm biểu tượng trong HTML và CSS. Cần thêm một số biểu tượng vào trang web của bạn?
Có nhiều cách khác nhau để thêm biểu tượng trong HTML và CSS
- Cách dễ nhất là sử dụng các biểu tượng HTML, chỉ cần sao chép và dán mã thực thể HTML tương ứng. Ví dụ:
★
đại diện cho biểu tượng ngôi sao - Tải xuống hình ảnh biểu tượng từ các trang web như FlatIcon và sử dụng chúng theo nguyên trạng. e. G.
- Sử dụng một bộ biểu tượng phông chữ, chẳng hạn như Webdings. e. G.
ABC
- Cuối cùng, tải và sử dụng các thư viện biểu tượng như Font Awesome và Material Icons
Nhưng những điều này được thực hiện chính xác như thế nào?
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TLDR – TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
THÊM BIỂU TƯỢNG HTML CSS
Được rồi, bây giờ chúng ta hãy tìm hiểu các phương pháp khác nhau về cách thêm biểu tượng trong HTML và CSS
PHƯƠNG PHÁP 1] BIỂU TƯỢNG HTML
1-html-ký hiệu. html
★ STAR!
☂ Weather report.
☃ Do you want to build a snowman?
☻ Happy face.
★ NGÔI SAO
☂ Báo cáo thời tiết
☃ Bạn có muốn đắp người tuyết không?
☻ Khuôn mặt hạnh phúc
Những loại ma thuật này là? . Phần tốt nhất là chúng được đưa thẳng vào HTML gốc và chúng tôi không cần tải các khung của bên thứ 3 để chúng hoạt động
Cách sử dụng rất đơn giản, chỉ cần định nghĩa NUMBER;
và nó sẽ “dịch” sang ký hiệu HTML tương ứng. Tôi sẽ để lại một liên kết đến tài liệu tham khảo đầy đủ trong phần bổ sung bên dưới. Ngoài ra, các ký hiệu này được xử lý giống như văn bản, chúng tôi có thể kiểm soát kích thước bằng cách sử dụng
So call me maybe?
0, thậm chí áp dụng So call me maybe?
1 và So call me maybe?
2 trên đó
PHƯƠNG PHÁP 2] HÌNH ẢNH BIỂU TƯỢNG
2A] BIỂU TƯỢNG HÌNH ẢNH PHẲNG
2a-icon-hình ảnh. html
So call me maybe?
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
PHƯƠNG PHÁP NÀO LÀ TỐT NHẤT?
- Cá nhân tôi thích các biểu tượng HTML hơn khi nói đến các dự án nhỏ, vì nó là tùy chọn nhẹ nhất. Nhưng hãy lưu ý rằng một số biểu tượng sẽ không hiển thị đúng trên các trình duyệt cũ hơn, bạn sẽ không muốn sử dụng biểu tượng này nếu có vấn đề về khả năng tương thích ngược
- Hình ảnh là an toàn nhất và sẽ luôn hoạt động, nhưng chúng làm tăng thời gian tải
- Phông chữ Tuyệt vời và Biểu tượng Tài liệu của Google cũng là những tùy chọn khá an toàn nhưng chúng cũng làm tăng thời gian tải
- Tải phông chữ là loại meh
LIÊN KẾT và THAM KHẢO
- Danh sách tham khảo ký hiệu HTML – Toptal
- con sóc phông chữ
- DaFont
- 1001 Phông chữ Miễn phí
- phông chữ tuyệt vời
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc