Biểu tượng Materialize hoạt động như thế nào?

Question

Có hai cách để sử dụng Materilize Biểu tượng:

1. <i class="mdi-action-settings"></i>
2. <i class="material-icons">settings</i>

<i class="mdi-action-settings"></i> Tôi hiểu như thế nào phương pháp đầu tiên này làm việc. Điều này hoạt động như css được định nghĩa bên dưới:

.mdi-action-settings:before { 
    content: "\e672"; 
} 

Bây giờ câu hỏi của tôi là phương pháp thứ hai <i class="material-icons">settings</i> hoạt động như thế nào?

Đây là URL để xem Materialize Icons

Answer 1

Đây là một cái gì đó gọi là chữ ghép. Hãy xem trang this giải thích cách bật chúng trong CSS.

Tóm tắt câu chuyện dài, nếu bạn bật tính năng này, bạn yêu cầu trình duyệt tìm kiếm các kết hợp chữ cái sẽ hiển thị theo cách khác. Một ví dụ được hiển thị here. Một số phông chữ đặc biệt (như trong materializecss hoặc những cái bạn tạo trong icomoon.io) chỉ cần sử dụng tính năng này với các từ để hiển thị các biểu tượng thay vì các chữ cái kết hợp. Nếu trình duyệt không thể xử lý các chữ ghép, sau đó nó thả xuống một cách duyên dáng từ chữ, thay vì một khoảng trống.