How to style prev/next arrows button?

Question

GOAL

I\'ve been trying to modify the slick.css to fit the style I need in my site. I got the slick.css

Answer 1

<script type="text/javascript">
$(document).ready(function(){
    $('.responsive_com2').slick({
        arrows: false,
        dots:true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        slidesPerRow: 1,
        rows: 1,
    });

    $('.left_news').click(function(){
        $('.responsive_com2').slick('slickPrev');
    })

    $('.right_news').click(function(){
        $('.responsive_com2').slick('slickNext');
    })

});
</script>

Answer 2

.slick-prev::before {
    font-family: FontAwesome;
    content: "\f0d9";
    font-size: 22px;
}  
.slick-next::before {
    font-family: FontAwesome;
    content:  "\f0da";
    font-size: 22px;        
}      

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

<button type="button" class="slick-prev "></button>

<button type="button" class="slick-next "></button>

Answer 3

If you are using sass you can set sass variables provided by slick.

Refer: Add custom buttons on Slick Carousel

Answer 4

The Basic thing is its producing arrows by content property:

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "‹"; }
[dir="rtl"] .slick-prev:before { content: "›"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "›"; }
[dir="rtl"] .slick-next:before { content: "‹"; }

Replace these classes and after that just play with margin and positions properties to adjust the arrows, if this didnot fix the issue send me the http://jsfiddle.net/ link i will send you the complete solution.

If want to use Font Awesome

.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }

For list of Font icons visit http://astronautweb.co/snippet/font-awesome/ and how to implement the font visit this thread Use font awesome icon as css content