title: Change the Arrow buttons in Slick slider
body: <p>I want to change the arrows in my slick slider but it does not change. I want the next and previous button as an image. I have tried putting it in a <code>&lt;style&gt;</code> but it still not working. Where can I change the arrows setting?</p>
  
  <p><strong>slick theme css</strong>
      @charset "UTF-8";</p>
  
  <pre><code>// Default Variables
  
  $slick-font-path: "./fonts/" !default;
  $slick-font-family: "slick" !default;
  $slick-loader-path: "./" !default;
  $slick-arrow-color: white !default;
  $slick-dot-color: black !default;
  $slick-dot-color-active: $slick-dot-color !default;
  $slick-prev-character: "←" !default;
  $slick-next-character: "→" !default;
  $slick-dot-character: "•" !default;
  $slick-dot-size: 6px !default;
  $slick-opacity-default: 0.75 !default;
  $slick-opacity-on-hover: 1 !default;
  $slick-opacity-not-active: 0.25 !default;
  
  @function slick-image-url($url) {
      @if function-exists(image-url) {
          @return image-url($url);
      }
      @else {
          @return url($slick-loader-path + $url);
      }
  }
  
  @function slick-font-url($url) {
      @if function-exists(font-url) {
          @return font-url($url);
      }
      @else {
          @return url($slick-font-path + $url);
      }
  }
  
  /* Slider */
  
  .slick-list {
      .slick-loading &amp; {
          background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
      }
      position: absolute;
      margin: 0 auto;
  }
  
  /* Icons */
  @if $slick-font-family == "slick" {
      @font-face {
          font-family: "slick";
          src: slick-font-url("slick.eot");
          src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
          font-weight: normal;
          font-style: normal;
      }
  }
  
  /* Arrows */
  
  .slick-prev,
  .slick-next {
      position: absolute;
      display: block;
      height: 20px;
      width: 30px;
      line-height: 0px;
      font-size: 0px;
      cursor: pointer;
      background: transparent;
      color: transparent;
      top: 50%;
      margin-top: -10px;
      padding: 0;
      border: none;
      outline: none;
      &amp;:hover, &amp;:focus {
          outline: none;
          background: transparent;
          color: transparent;
          &amp;:before {
              opacity: $slick-opacity-on-hover;
          }
      }
      &amp;.slick-disabled:before {
          opacity: $slick-opacity-not-active;
      }
  }
  
  .slick-prev:before, .slick-next:before {
      font-family: $slick-font-family;
      font-size: 20px;
      line-height: 1;
      color: $slick-arrow-color;
      opacity: $slick-opacity-default;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev {
      left: -25px;
      [dir="rtl"] &amp; {
          left: auto;
          right: -25px;
      }
      &amp;:before {
          content: $slick-prev-character;
          [dir="rtl"] &amp; {
              content: $slick-next-character;
          }
      }
  }
  
  .slick-next {
      right: -25px;
      [dir="rtl"] &amp; {
          left: -25px;
          right: auto;
      }
      &amp;:before {
          content: $slick-next-character;
          [dir="rtl"] &amp; {
              content: $slick-prev-character;
          }
      }
  }
  
  /* Dots */
  
  .slick-slider {
      margin-bottom: 30px;
  }
  
  .slick-dots {
      position: absolute;
      bottom: -45px;
      list-style: none;
      display: block;
      text-align: center;
      padding: 0;
      width: 100%;
      li {
          position: relative;
          display: inline-block;
          height: 20px;
          width: 20px;
          margin: 0 5px;
          padding: 0;
          cursor: pointer;
          button {
              border: 0;
              background: transparent;
              display: block;
              height: 20px;
              width: 20px;
              outline: none;
              line-height: 0px;
              font-size: 0px;
              color: transparent;
              padding: 5px;
              cursor: pointer;
              &amp;:hover, &amp;:focus {
                  outline: none;
                  &amp;:before {
                      opacity: $slick-opacity-on-hover;
                  }
              }
              &amp;:before {
                  position: absolute;
                  top: 0;
                  left: 0;
                  content: $slick-dot-character;
                  width: 20px;
                  height: 20px;
                  font-family: $slick-font-family;
                  font-size: $slick-dot-size;
                  line-height: 20px;
                  text-align: center;
                  color: $slick-dot-color;
                  opacity: $slick-opacity-not-active;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
              }
          }
          &amp;.slick-active button:before {
              color: $slick-dot-color-active;
              opacity: $slick-opacity-default;
          }
      }
  }
  </code></pre>
  
  <p><strong>slick css</strong></p>
  
  <pre><code>/* Slider */
  
  .slick-slider {
      position: relative;
      margin: 0 auto;
      display: block;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  .slick-list {
      position: relative;
      overflow: hidden;
      display: block;
      margin: 0 auto;
      padding: 0;
  
      &amp;:focus {
          outline: none;
      }
  
      &amp;.dragging {
          cursor: pointer;
          cursor: hand;
      }
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  
  .slick-track {
      position: relative;
      left: 0;
      top: 0;
      display: block;
  
      &amp;:before,
      &amp;:after {
          content: "";
          display: table;
      }
  
      &amp;:after {
          clear: both;
      }
  
      .slick-loading &amp; {
          visibility: hidden;
      }
  }
  .slick-slide {
      float: left;
      min-height: 1px;
      [dir="rtl"] &amp; {
          float: right;
      }
      img {
          display: block;
      }
      &amp;.slick-loading img {
          display: none;
      }
  
      display: none;
  
      &amp;.dragging img {
          pointer-events: none;
      }
  
      .slick-initialized &amp; {
          display: block;
      }
  
      .slick-loading &amp; {
          visibility: hidden;
      }
  
      .slick-vertical &amp; {
          display: block;
          height: auto;
          border: 1px solid transparent;
      }
  }
  </code></pre>
  
  <p><a href="https://site-practice-chum.c9.io/Untitled1.html" rel="noreferrer">preview of the site</a></p>