Slick Carousel - Как изменить кнопки по умолчанию

Question

Я работаю с Slick Carousel в первый раз. Проект, над которым я сейчас работаю, нуждается в большинстве файлов, загружаемых через CDN. Как я могу заменить кнопки по умолчанию для «Next» и «Previous», которые загружаются через их размещенный JQuery?

На данный момент это всего лишь кнопка с текстом, я бы хотел заменить ее символом FontAwesome стрелок.

<h1> One Slider At a Time </h1> 
<div class="slider"> 
    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    </div> 

Вот мой Demo

Answer 1

Используйте CSS, чтобы указать content из .slick-prev::before и .slick-next::before:

.slick-prev::before { 
    content: "<"; 
} 
.slick-next::before { 
    content: ">"; 
} 

https://jsfiddle.net/ryanpcmcquen/z6qoz1mh/

Если вы хотите использовать FontAwesome только load that in и указать юникод символы как контент, например:

.slick-prev::before, .slick-next::before { 
    font-family: FontAwesome; 
} 
.slick-prev::before { 
    /* fa-arrow-circle-left */ 
    content: "\f0a8"; 
} 
.slick-next::before { 
    /* fa-arrow-circle-right */ 
    content: "\f0a9"; 
}