thuộc tính nội dung trong CSS

Question

Trong một số mẫu, tôi thấy rằng mũi tên được tạo bằng CSS. một cái gì đó như thế này:

div:after{ 
    content:"\f107"; 
} 

mã này hiển thị một mũi tên như thế này:

mã này là gì? nơi tôi có thể tìm thêm mã?

Answer 1

Sử dụng content thuộc tính nhúng nội dung ảo bên trong một phần tử, nó được sử dụng với một pseudo :before hoặc :after, vì vậy nếu bạn sử dụng :before thì nội dung sẽ được nhúng trước đó.

Từ MDN:

Thuộc tính content CSS được sử dụng với ::before và ::after giả yếu tố để tạo ra nội dung trong một phần tử. Đối tượng được chèn bằng cách sử dụng thuộc tính content là ẩn danhreplaced elements.

Thuộc tính nội dung có thể giữ bất kỳ character, . Để biết thêm thông tin, bạn có thể tham khảo một bài viết here.

Ngoài ra, bạn có thể nhận được công cụ chuyển đổi tiện dụng here.

---

Phương pháp này cũng được sử dụng bởi font-awesome-Example và thư viện phông chữ svg liên quan nhúng khác, nơi mà bạn chỉ có thể gọi cho lớp học để các yếu tố và các phông chữ sẽ được nhúng vào hầu.

---

Ngoài ra, chỉ cần một thông tin bên, nội dung được tạo ra sử dụng CSS content tài sản là inline theo mặc định, điều này cũng được render inside yếu tố và không bên ngoài ..

Answer 2

Đây là số escaped unicode character.

Answer 3

CSS Content tài sản: Thuộc tính nội dung được sử dụng với: before và: after pseudo-elements, để chèn nội dung đã tạo.

Read more

Answer 4

Như câu trả lời khác đã giải thích, các quy tắc CSS sử dụng content tài sản để chèn một ký tự theo số Unicode của nó.

Tuy nhiên, ký tự được sử dụng là U + F107 PRIVATE USE CHARACTER-F107. Điều này có nghĩa là nó không có ý nghĩa ngoại trừ các thỏa thuận riêng và không nên được sử dụng trong trao đổi thông tin công cộng. Thật không may, một số thủ thuật "tuyệt vời" sử dụng các điểm mã sử dụng riêng để chèn các ký hiệu đồ họa. Điều này có nghĩa rằng trừ khi một phông chữ rất cụ thể, với một số ký hiệu được gán cho các điểm mã được sử dụng, một biểu tượng chung của một ký tự không xác định sẽ xuất hiện.

Vì vậy, an toàn hơn nhiều khi sử dụng hình ảnh thay thế, trong nội dung phù hợp.

Answer 5

CSS có thuộc tính được gọi là content. Nó chỉ có thể được sử dụng với các phần tử giả :after và :before. Nó được viết giống như một bộ chọn giả (với dấu hai chấm), nhưng nó được gọi là phần tử giả vì nó không thực sự chọn bất kỳ thứ gì tồn tại trên trang nhưng thêm một cái gì đó mới vào trang.

Phông chữ tuyệt vời là phông chữ web chứa tất cả các biểu tượng từ khung công tác Bootstrap của Twitter và giờ đây còn nhiều hơn nữa.

Bạn có thể tìm thấy một danh sách các FontAwesome đây: A list of Font Awesome icons and their CSS content values

Bạn cũng có thể đi qua liên kết này, FontAwesome Examples, nơi bạn có thể thấy các biểu tượng khác nhau và làm thế nào để áp dụng kích thước khác nhau trên đó.