как сделать чтобы отображались 2 иконки

[mstdmstd]

Всем привет,
Подскажите, плиз, у меня отображабтся данные с полями type, status и в зависимости от значений этих полей надо отобразить иконку

С иконкой для каждого из них по отдельности без проблем :
 

.fc-event-custom-service {    background-color: #3aad8b !important;    border: none !important;    background: url('/static/images/appointment.png') 40% 40% no-repeat;    background-position: right top;}.fc-event-status-Confirmed {    background: url('/static/images/appointment_confirmed.png')  40% 40% no-repeat;    background-position: right top;}.fc-event-status-Cancelled {    background: url('/static/images/appointment_cancelled.png')  40% 40% no-repeat;    background-position: right top;}

...

А как сделать чтобы отображались 2 иконки(или возможно только одна) справа, одна рядом с другой если у элемента определен класс, например "fc-event-custom-service fc-event-status-Confirmed" ?
 

[satantx]

Можно отобразить через :after

[psixodyb]

Немного корявый вариант в голове появлися, но все же

Написать стили еще для сочетаний стилей.

.fc-event-status-Cancelled.fc-event-status-Confirmed {    background: url('/static/images/appointment_cancelled.png')  40% 40% no-repeat, url('/static/images/appointment_cancelled.png')  40% 60% no-repeat,;    background-position: right top;}

[mstdmstd]

psixodyb, А можно ли в background: url( задать несколько картинок через запятую ? - я попробовал отображается только картинка слева...И в примерах что я нашел в background: url( - задается только 1 картинкаВозможно, нужно указать отступ для второй картинки, чтобы она не перекрывалась первой?

[mstdmstd]

satantx, А можно ссылочку как это можно сделать через :after?

Я погуглил, но ничего похожего не нашел...

[Z1gnet]

во-первых вашу запись можно сократить и вообще вы дублируете одни и те же  стили.

 background-color: #3aad8b !important;    border: none !important;    background: url('/static/images/appointment.png') 40% 40% no-repeat;    background-position: right top;

это можно сократить до

 border: none !important; background: #3aad8b url('/static/images/appointment.png') right top no-repeat;

ну и картинка через :after http://codepen.io/Z1gnet/pen/raJgoB

[mstdmstd]

Спасибо, с after получилось.
Для отображения статуса "Confirmed" у меня получилось опеределение 3-х классов:

.fc-event-custom-service-Confirmed {    margin: 0 auto;    width: 25px;    height: 25px;    border: none !important;    background:#3aad8b url('/static/images/appointments/appointment24.png') right top no-repeat;    position: relative;}.fc-event-custom-service-Confirmed:hover {    margin: 0 auto;    width: 25px;    height: 25px;    border: none !important;    background:#3aad8b url('/static/images/appointments/appointment24.png') right top no-repeat;    position: relative;}.fc-event-custom-service-Confirmed:after{    content:'';    position: absolute;    right: 25px;    top: 0;    width: 25px;    height: 25px;    background: url('/static/images/appointments/appointment_confirmed24.png') no-repeat;}

Но понадобилось в некоторых случаях отображать и третью картинку, если помечено поле use_outcall_address
Я добавил в стили определение :

.fc-event-custom-service-Confirmed-use_outcall_address {    width: 25px;    height: 25px;    border: none !important;    background:#3aad8b url('/static/images/appointments/appointment24.png') right top no-repeat;    position: relative;}.fc-event-custom-service-Confirmed-use_outcall_address:hover {    width: 25px;    height: 25px;    border: none !important;    background:#3aad8b url('/static/images/appointments/appointment24.png') right top no-repeat;    position: relative;}.fc-event-custom-service-Confirmed-use_outcall_address:after{    content:'';    position: absolute;    right: 75px;    top: 0px;    width: 25px;    height: 25px;    background: url('/static/images/appointments/appointment_service_outcall.png') no-repeat;}

В определении класса элемента прописано 

fc-event-end fc-event-custom-service-Confirmed fc-event-custom-service-Confirmed-use_outcall_address

Я полагал что установив right: 75px; в опмсании последнего класса    картинка appointment_service_outcall.png будет слева от картинки /static/images/appointments/appointment_no-show24.png
Но в результате эти 2 картинки не отображаются вовсе. А как правильно?