Replace css background image with Font Awesome icon

Question

I know this should be easy but I don't know what I am doing wrong. I just want to replace a png background-image (css) with an Font Awesome icon.

This is the whole css file:

.wc-bookings-date-picker .ui-datepicker{padding:0;width:auto;}
.wc-bookings-date-picker .ui-widget-content{border:0;background:#fff;-moz-box-shadow:0 1px 3px rgba(0,0,0,.19);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.19);box-shadow:0 1px 3px rgba(0,0,0,.19);}
.wc-bookings-date-picker .ui-datepicker-header{padding:0;overflow:hidden;text-transform:uppercase;border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;background-color:#999;background-image:none;background-image:-moz-linear-gradient(bottom,#999 0,#aaa 100%);background-image:-o-linear-gradient(bottom,#999 0,#aaa 100%);background-image:-webkit-linear-gradient(bottom,#999 0,#aaa 100%);background-image:linear-gradient(bottom,#999 0,#aaa 100%);border:0;border-top:1px solid #999;color:#fff;}
.wc-bookings-date-picker .ui-datepicker-header .ui-state-hover{background:0 0;border-color:transparent;cursor:pointer;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-title{line-height:1em;font-weight:400;padding:.75em 0;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next,.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev{top:-1px;background:#999;border-radius:0;font-weight:400;height:2.5em;width:2em;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next.ui-state-hover,.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev.ui-state-hover{background:#aaa;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev{left:0;border:0;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next{right:0;border:0;}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next span,.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev span{margin-top:-4px;top:40%;}
.wc-bookings-date-picker .ui-icon-circle-triangle-e{background-image:url(../images/ui-icons_ffffff_256x240.png);background-position:-32px 0;}
.wc-bookings-date-picker .ui-icon-circle-triangle-w{background-image:url(../images/ui-icons_ffffff_256x240.png);background-position:-96px 0;}
.wc-bookings-date-picker .ui-datepicker table{margin:0;}
.wc-bookings-date-picker .ui-datepicker th{padding:.75em 0;text-transform:uppercase;color:#bbb;font-weight:400;border-top:1px solid #e6e6e6;background:#fefefe;}
.wc-bookings-date-picker .ui-datepicker td{border:0;border-top:1px solid #e6e6e6;border-right:1px solid #e6e6e6;background:#fefefe;padding:0!important;}
.wc-bookings-date-picker .ui-datepicker td:last-child{border-right:0;}
.wc-bookings-date-picker .ui-datepicker td .ui-state-default{background:0 0;background-image:none!important;border:0;color:#2b2b2b;margin:0;font-weight:400;text-align:center;padding:.75em 0;}
.wc-bookings-date-picker .ui-datepicker td a.ui-state-active,.wc-bookings-date-picker .ui-datepicker td a.ui-state-active.ui-state-hover{background:#fefefe;color:#b2b2b2;background-image:none!important;}
.wc-bookings-date-picker .ui-datepicker td.fully_booked a,.wc-bookings-date-picker .ui-datepicker td.fully_booked span{background-color:#c0392b!important;background-image:none!important;border-color:rgba(0,0,0,.1)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.1);}
.wc-bookings-date-picker .ui-datepicker td.bookable a{background-color:#2ecc71!important;background-image:none!important;border-color:rgba(0,0,0,.1)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.1);}
.wc-bookings-date-picker .ui-datepicker td.partial_booked a{background-color:#2ecc71!important;background-image:none!important;border-color:rgba(0,0,0,.1)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.1);position:relative;z-index:1;}
.wc-bookings-date-picker .ui-datepicker td.partial_booked a:before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-top:2.5em solid #C96259;border-right:2.5em solid transparent;z-index:-10;opacity:.75;}
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a{background:#239e57!important;opacity:1!important;}
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-other-month{background:#eee;}
.wc-bookings-date-picker .ui-datepicker td.bookable-range .ui-state-default{background:#239e57;color:#fff;}

And the part that needs to be changed into Font Awesome icons is:

.wc-bookings-date-picker .ui-icon-circle-triangle-e{background-image:url(../images/ui-icons_ffffff_256x240.png);background-position:-32px 0;}
.wc-bookings-date-picker .ui-icon-circle-triangle-w{background-image:url(../images/ui-icons_ffffff_256x240.png);background-position:-96px 0;}

The css content for previous = "\f053"

The css content for n next = "\f054"

I feel really dumb :(

Answer 1

This is not dumb. Icons from font-awesome might look similar to images but they do not work at all the same way.

More specifically, they work precisely like text. As such, you cannot benefit all the functions associated with background images, that can fit / stretch the container.

As it is a font, you cannot use it in background. Fortunately, you can still make it appear with pseudo elements.

The solution would be like this:

.wc-bookings-date-picker .ui-icon-circle-triangle-e,  .wc-bookings-date-picker .ui-icon-circle-triangle-w {
    position: relative;
}

.wc-bookings-date-picker .ui-icon-circle-triangle-e::before {
    content: "\f053";
    font-family: 'FontAwesome';
    /* Put here the height of the image */
    font-size: 240px;
    position: absolute;
    left: -32px;
    top:0;
}

.wc-bookings-date-picker .ui-icon-circle-triangle-w::before {
    content: "\f054";
    font-family: 'FontAwesome';
    /* Put here the height of the image */
    font-size: 240px;
    position: absolute;
    left: -96px;
    top:0;
}