Thêm hỗ trợ Emoji cho trang web của bạn với CSS CSS

Biểu tượng cảm xúc đã chiếm lĩnh các cuộc trò chuyện kỹ thuật số và những biểu tượng nhỏ dễ thương này nhanh chóng thấm nhuần văn hóa Internet. Bây giờ chúng là một phần trong cuộc sống của chúng ta và bạn có thể tìm thấy chúng ở mọi nơi từ ứng dụng máy tính để bàn đến WordPress.

Và nếu bạn đã từng muốn biểu tượng cảm xúc tùy chỉnh trên trang web của bạn thì Emoji CSS là thư viện hoàn hảo để sử dụng.

Những biểu tượng CSS thuần túy này là được tạo ra với hình ảnh nền vì thế mỗi biểu tượng cảm xúc có tệp PNG riêng. Những tập tin hình ảnh này là võng mạc đã sẵn sàng vì vậy chúng trông tuyệt vời trên tất cả các màn hình.

Bạn cũng có thể giới thiệu những biểu tượng cảm xúc này bằng cách bao gồm tệp CSS thô vào trang web của bạn. Các tập tin tham khảo hình ảnh tự lưu trữ trên GitHub vì vậy bạn không cần lưu trữ bất cứ thứ gì tại địa phương để bắt đầu.

Trên trang chủ Emoji CSS, bạn sẽ tìm thấy tất cả các lớp mã hình ảnh cùng với một đoạn demo mẫu. Khi bạn đã thêm tệp CSS Emoji vào tài liệu của mình, tất cả những gì bạn phải làm là thêm một yếu tố với .em lớp, cùng với bất kỳ lớp nào liên quan đến biểu tượng cụ thể bạn muốn hiển thị.

Vì vậy, ví dụ mã này:

sẽ thêm 100 biểu tượng cảm xúc trực tiếp vào nội dung trang web của bạn. Bạn có tốt hơn 200 biểu tượng cảm xúc khác nhau để lựa chọn và dự án là mã nguồn mở vậy nó là có sẵn để cập nhật.

Trang chủ Emoji CSS tốt nhất là siêu dễ sử dụng. Chỉ bấm vào một biểu tượng và bạn sẽ tự động sao chép mã nguồn đó vào bảng tạm để bạn có thể dán ngay vào HTML của mình.

Tôi sẽ là người đầu tiên thừa nhận rằng không phải mọi trang web đều được hưởng lợi từ thư viện Emoji này nhưng mạng xã hội và trang web hỗ trợ bình luận có thể cải thiện sự tham gia của người dùng bằng cách thêm hỗ trợ biểu tượng cảm xúc. Và với thư viện Emoji CSS, đây thực tế là một quá trình gồm hai bước để tạo biểu tượng cảm xúc cho trang web của bạn.