Font Awesome font icons for Oxygen’s slider arrows

The left and right arrows in Oxygen’s slider uses an image background by default.

We can use CSS to replace these with Font Awesome’s font icons for better control (size, regular and hover color etc).

CSS code:

body .unslider-arrow {
    background: transparent;
    text-indent: 0;
    color: transparent;
    opacity: 1;
}

body .unslider-arrow:after {
    font-size: 48px;
    font-family: FontAwesome;
    content: "\f104";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: #111;
    opacity: 0.5;
}

body .unslider-arrow:hover:after,
body .unslider-arrow:focus:after {
    opacity: 1;
}

body .unslider-arrow.prev {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

body .unslider-arrow.next {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

And here is some sample CSS to display the arrows having a circle background:

body .unslider-arrow {
    background: rgba(0, 0, 0, 0.2);
    text-indent: 0;
    color: transparent;
    opacity: 1;
}

body .unslider-arrow:after {
    font-size: 20px;
    font-family: FontAwesome;
    content: "\f104";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: #fff;
}

body .unslider-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

body .unslider-arrow:hover:after,
body .unslider-arrow:focus:after {
    color: #ddd;
}

body .unslider-arrow.prev {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

body .unslider-arrow.next {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}