Tam giác HTML

Mỗi một trong ba phương thức này phải có cùng một đầu ra. Đối với các biểu tượng khác, có ba tùy chọn giống nhau. Một số thậm chí có tùy chọn thứ tư, cho phép bạn sử dụng tham chiếu dựa trên chuỗi (ví dụ:. ♥ để hiển thị ♥)

Bạn có thể sử dụng một trang web tham khảo như bảng Unicode. com để tìm biểu tượng nào được hỗ trợ trong UNICODE và chúng tương ứng với mã nào. Ví dụ: bạn tìm các giá trị cho tam giác hướng xuống tại http. // bảng unicode. com/vi/25BC/

Lưu ý rằng các phương pháp này chỉ đủ cho các biểu tượng có sẵn theo mặc định trong mọi trình duyệt. Đối với các ký hiệu như ☃,❄,★,☂,☭,⎗ hoặc ⎘, điều này ít có khả năng xảy ra hơn. Mặc dù có thể cung cấp hỗ trợ nhiều trình duyệt cho các ký hiệu UNICODE khác, quy trình này phức tạp hơn một chút

Nếu bạn muốn biết cách thêm hỗ trợ cho các ký tự UNICODE ít phổ biến hơn, hãy xem Tạo phông chữ web với các ký hiệu Mặt phẳng đa ngôn ngữ bổ sung Unicode để biết thêm thông tin về cách thực hiện việc này

Hinh nên

Một chiến lược hoàn toàn khác là sử dụng hình nền thay vì phông chữ. Để có hiệu suất tối ưu, tốt nhất bạn nên nhúng hình ảnh vào tệp CSS của mình bằng cách mã hóa cơ sở cho nó, như được đề cập bởi ví dụ:. @weasel5i2 và @Obsidian. Tuy nhiên, tôi khuyên bạn nên sử dụng SVG thay vì GIF, điều đó tốt hơn cho cả hiệu suất và độ sắc nét của biểu tượng của bạn

Mã sau đây là phiên bản base64 và SVG của biểu tượng

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

Khi nào nên sử dụng hình nền hoặc phông chữ

Đối với nhiều trường hợp sử dụng, phông chữ biểu tượng và hình nền dựa trên SVG phần lớn tương đương nhau về hiệu suất và tính linh hoạt. Để quyết định chọn cái nào, hãy xem xét những khác biệt sau

hình ảnh SVG

• Chúng có thể có nhiều màu
• Họ có thể nhúng CSS của riêng mình và/hoặc được tạo kiểu bởi tài liệu HTML
• Chúng có thể được tải dưới dạng một tệp riêng biệt, được nhúng trong CSS VÀ được nhúng trong HTML
• Mỗi biểu tượng được thể hiện bằng mã XML hoặc mã base64. Bạn không thể sử dụng ký tự trực tiếp trong trình chỉnh sửa mã của mình hoặc sử dụng thực thể HTML
• Việc sử dụng nhiều lần cùng một ký hiệu ngụ ý trùng lặp ký hiệu khi mã XML được nhúng trong HTML. Không cần sao chép khi nhúng tệp vào CSS hoặc tải tệp dưới dạng tệp riêng biệt
• Bạn không thể sử dụng color, font-size, line-height,

  ▲
  ▼
  

  0 hoặc các quy tắc kiểu dáng liên quan đến phông chữ khác để thay đổi cách hiển thị biểu tượng của mình, nhưng bạn có thể tham chiếu các thành phần khác nhau của biểu tượng dưới dạng hình dạng riêng lẻ
• Bạn cần một số kiến ​​thức về mã hóa SVG và/hoặc base64
• Hỗ trợ hạn chế hoặc không có trong các phiên bản IE cũ

Phông chữ biểu tượng

• Một biểu tượng có thể có nhưng một màu tô, một màu nền, v.v.
• Một biểu tượng có thể được nhúng trong CSS hoặc HTML. Trong HTML, bạn có thể sử dụng ký tự trực tiếp hoặc sử dụng thực thể HTML để thể hiện ký tự đó
• Một số biểu tượng có thể được hiển thị mà không cần sử dụng webfont. Hầu hết các biểu tượng không thể
• Nhiều lần sử dụng cùng một biểu tượng ngụ ý trùng lặp biểu tượng khi ký tự của bạn được nhúng trong HTML. Không cần sao chép khi nhúng tệp vào CSS
• Bạn có thể sử dụng color, font-size, line-height,

  ▲
  ▼
  

  0 hoặc các quy tắc kiểu dáng liên quan đến phông chữ khác để thay đổi cách hiển thị biểu tượng của bạn
• Bạn không cần kiến ​​thức kỹ thuật đặc biệt
• Hỗ trợ trong tất cả các trình duyệt chính, bao gồm các phiên bản IE cũ

Cá nhân tôi khuyên bạn chỉ nên sử dụng hình nền khi bạn cần nhiều màu và những màu đó không thể đạt được bằng cách sử dụng color,

▲
▼

Lợi ích chính của việc sử dụng hình ảnh SVG là bạn có thể cung cấp cho các thành phần khác nhau của biểu tượng kiểu dáng riêng của chúng. Nếu bạn nhúng mã XML SVG của mình vào tài liệu HTML, điều này rất giống với việc tạo kiểu cho HTML. Tuy nhiên, điều này sẽ dẫn đến một trang web sử dụng cả thẻ HTML và thẻ SVG, điều này có thể làm giảm đáng kể khả năng đọc của trang web. Nó cũng tăng thêm độ phồng nếu biểu tượng được lặp lại trên nhiều trang và bạn cần xem xét rằng các phiên bản IE cũ không có hoặc hỗ trợ hạn chế cho SVG

Các biểu tượng được gọi trong HTML là gì?

Làm cách nào để sử dụng mã UTF 8 trong HTML?

Mũi tên trong HTML là gì?