GOAL

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

Now

• I want to make the arrow (left + right) bigger


• For icons, I want to use the one with no circle-border around it.


• I like fa-chevron-right and fa-chevron-left

What have I tried ?

portion of slick.css

.slick-prev, .slick-next { position: absolute; display: block; height: 200px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }



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







.slick-prev { left: -10px; top: 70px;  }

[dir=rtl] .slick-prev { left: auto; right: -10px; top: 70px; }

.slick-prev:before { content: ←; }

[dir=rtl] .slick-prev:before { content: →; }



.slick-next { right: -10px; top: 70px; }

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

.slick-next:before { content: →; }

[dir=rtl] .slick-next:before { content: ←; }

HTML

<div class=row slick >

// just a bunch of lists in here

</div>

Detail Photo

Here is what I have now.

Here is what I want to have.

Question

• Can someone help me resolve this ?

  
  
  

  I really appreciate your consideration and time. :)