Làm thế nào để sử dụng lỗi jquery (màu đỏ) Các biểu tượng

Question

Tôi có một khoảng thời gian như thế này

<span class="ui-icon ui-icon-circle-close"></span> 

mang đến cho hiển thị một biểu tượng thân thiết của màu sắc tương tự như màu sắc chủ đề.

Nhưng muốn sử dụng các biểu tượng màu đỏ khả dụng cho lỗi này. Tôi nên sử dụng lớp jquery nào cho điều đó.

Tôi tìm thấy một lớp trong jquery css

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon 
{background-image: url(images/ui-icons_cd0a0a_256x240.png); } 

hình ảnh này là hình ảnh có chứa jquery biểu tượng màu đỏ. Nhưng tôi không thể sử dụng nó.

Answer 1

Lớp của khoảng chỉ xác định biểu tượng.

Đặt "ui-state-error" trên phụ huynh để thay đổi màu của biểu tượng thành màu đỏ.

Kiểm tra ví dụ biểu tượng tại đây: (dưới cùng của thanh bên phải).

Answer 2

<span class="ui-icon ui-icon-alert"></span> 

nên làm điều đó.

Được chỉnh sửa vì tôi nghĩ rằng bây giờ tôi đã tìm thấy lớp phù hợp.

Answer 3

Khi cố gắng sử dụng các biểu tượng như vậy trước văn bản, tôi gặp sự cố ngắt dòng và căn chỉnh không đúng giữa biểu tượng và văn bản.

Để tránh các biểu tượng để thêm một ngắt dòng, sử dụng

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span> 

Để có được một sự liên kết tốt hơn cho các văn bản, sử dụng sau đây

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span> 
<span style="display: inline-block; overflow: hidden;">Your text</span> 

Answer 4

nếu bạn muốn chỉ biểu tượng với màu sắc khác, không phải toàn bộ hộp như ví dụ ở đây: , ở góc dưới cùng bên phải

thêm phần này vào bất kỳ vị trí nào trong tệp .css của bạn:

.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); } 

Tên và đường dẫn của tệp phụ thuộc vào màu bạn muốn.

Và trong html:

<div class="ui-icon-red ui-icon-circle-zoomin"> 

Answer 5

Áp dụng ui-state-lỗi đến lớp có chứa các biểu tượng (s) và loại bỏ các nền mặc định và biên giới:

CSS:

.error-state-icon.ui-state-error { 
    border:none; 
    background:none; 
} 

HTML:

<div class="ui-state-error error-state-icon"> 
<span class='ui-icon ui-icon-info'></span> 
</div> 

Demo >>