CSS: change arrows on fullpage JS?

Question

I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. However when trying to change the arrow style:

.controlArrow.prev {
    left: 50px;
    background: url(left.png);
    background-repeat: no-repeat;
}

.controlArrow.next {
    right: 50px;
}

It doesn't work, can anyone explain why?

Answer 1

First of all, download the lastest version of the plugin (and its CSS file). Fullpage.js no longer uses controlArrow but fp-controlArrow.

Make sure you add your own styles after including jquery.fullpage.css so you can over write the plugin ones. Also, make sure to over write all the styles applied by default.

Take into account that the current arrows are formed by the border attribute. not by any background. You need to replace those styles and even change the width and height.

If you take a look at jquery.fullpage.css you will see the styles you need to over write.

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}

Answer 2

I wanted to use font-awesome for arrow icons and didn't know what to do at first. But then I looked into the changes that were made in the html-markup after initialization of fuulpage.js:

original html-markup

<div class="fp-controlArrow fp-prev"></div>
<div class="fp-controlArrow fp-prev"></div>

and using the Raptor's reply to this question about changes in a CSS I've found that it is possible to append a new custom element to an element by default by adding two lines in the script where fullpage() was initialized:

changes in the script

$(document).ready(function () {
    $('#fullpage').fullpage();

    // The changes that were made

    $('.fp-prev').append('<span class="fa fa-angle-left"></span>');
    $('.fp-next').append('<span class="fa fa-angle-right"></span>');
});

The result is:

final html-markup

<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-left"></span>
</div>
<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-right"></span>
</div>

Answer 3

Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow:

.fp-controlArrow.fp-prev {
    left: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(left.png) no-repeat;
    cursor: pointer;
}
.fp-controlArrow.fp-next {
    right: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(right.png) no-repeat;
    cursor: pointer;
}