Làm cách nào để nhúng các ký tự Sử dụng Riêng tư Bổ sung Unicode trong nội dung do CSS tạo ra?

Question

Tôi đang sử dụng webfont cho biểu tượng. Glyphs biểu tượng được ánh xạ tới Sử dụng bổ sung Private Unicode của Area-Một & B.

Tất cả mọi thứ hoạt động tốt nếu tôi vượt qua ký tự vào CSS qua đĩa dữ liệu * thuộc tính:

<div class="icon" data-icon="&#xF005A;"></div> 

Và sau đó:

.icon::before { 
    font-family: IconFont; 
    content: attr(data-icon) 
} 

Nhưng nếu tôi cố gắng nhúng ký tự thoát trực tiếp vào CSS ...

.icon::before { 
    font-family: IconFont; 
    content: '\0F005A '; 
} 

Nó xuất hiện dưới dạng dấu hỏi biểu tượng bị thiếu.

Nhưng nếu tôi cố gắng một nhân vật đặc biệt khác nhau ...

.icon::before { 
    font-family: IconFont; 
    content: '\F8FF '; 
} 

Nó hoạt động tốt!

Tôi không thể tìm thấy bất cứ điều gì trong thông số nói rằng điều này là không thể ... Nó dường như không hoạt động.

Có ai có thông tin chi tiết về vấn đề này không?

Answer 1

Truy cập Icomoon để ánh xạ phông chữ biểu tượng của bạn với Khu vực sử dụng cá nhân. Khi bạn tải xuống phông chữ, keyamoon đã cung cấp html, có hai phương pháp để hiển thị các ký tự đặc biệt.

Phương pháp 1 (from CSS-tricks) và đưa vào Icomoon tải:

<i aria-hidden="true" data-icon="&#xe000;"></i> 

...... 

[data-icon]:before { 
    font-family: 'icomoon'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

Phương pháp 2 from Icomoon:

<span aria-hidden="true" class="icon-pencil"></span> 

...... 

.icon-pencil, .icon-folder { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.icon-pencil:before { 
    content: "\e000"; 
} 
.icon-folder:before { 
    content: "\e001"; 
} 

Bạn có thể sử dụng bất kỳ thẻ cho html thực sự; Tôi đồng ý với một trong các ý kiến ​​trong CSS-tricks rằng thẻ nghiêng có thể là ngữ nghĩa tốt nhất, vì nó đã được định nghĩa lại trong html5. Tôi chỉ thích tôi cho biểu tượng.