Published on August 2, 2018

Font Awesome font icons for Oxygen’s slider arrows

Sridhar Katakam

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);
}
tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right