title: How to style prev/next arrows button?
body: <blockquote>
    <p><strong>GOAL</strong></p>
  </blockquote>
  
  <p>I've been trying to modify the <code>slick.css</code> to fit the style I need in my site.
  I got the <code>slick.css</code> from <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">here</a>.</p>
  
  <p><strong>Now</strong></p>
  
  <ul>
  <li>I want to make the arrow (left + right) bigger</li>
  <li>For icons, I want to use the one with no <code>circle-border</code> around it.</li>
  <li>I like <code>fa-chevron-right</code> and <code>fa-chevron-left</code></li>
  </ul>
  
  <hr>
  
  <blockquote>
    <p><strong>What have I tried ?</strong></p>
  </blockquote>
  
  <p>portion of <code>slick.css</code></p>
  
  <pre><code>.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: "←"; }
  </code></pre>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;div class="row slick "&gt;
  // just a bunch of lists in here
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Detail Photo</strong></p>
  
  <p>Here is what I have now.</p>
  
  <p><img src="https://i.stack.imgur.com/100r6.jpg" alt="enter image description here"></p>
  
  <p>Here is what I want to have.</p>
  
  <p><img src="https://i.stack.imgur.com/d2qDv.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <blockquote>
    <p><strong>Question</strong></p>
  </blockquote>
  
  <ul>
  <li><p>Can someone help me resolve this ?</p>
  
  <p>I really appreciate your consideration and time. :)</p></li>
  </ul>