CSS: change arrows to fullpage JS?

Question

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

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

.controlArrow.next {
    right: 50px;
}

This does not work, can someone explain why?

Answer 1

@Alvaro's answer extension, all you need to replace the default arrows for images is as follows:

.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;
}

Answer 2

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

, jquery.fullpage.css, . , , .

, border. background. width height.

jquery.fullpage.css, , .

.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 3

-awesome , . , html- fuulpage.js:

html-

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

Raptor CSS, , , script, ()

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>');
});

:

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>