Can't add FontAwesome 5 in slick arrow

Question

I'm trying to style Slick arrow with CSS pseudo-elements with FontAwesome 5. From FontAwesome's documentation I also added this line before loding FantAwesome.

<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>

My CSS is below :

.slick-arrow {
    font-size: 0;
    position: absolute;
    color: #34495E;
    border: none;
    background-color: transparent;
    z-index: 1;
    top: 15%;
    box-shadow: none;
    padding: 15px 12px;
}
.slick-prev {
    left: -15px;
    text-align: left;
}
.slick-prev:after {
    content: "\f16c";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 900;
}

.slick-next {
    right: -15px;
    text-align: right;
}
.slick-next:after {
    font: 40px/1 'ionicons';
    content: "\f3d1";
}

If I remove

font-size: 0

then Font Awesome icons are showing but with the text "previous/next". I only need icon without text.

Answer 1

thats how it should be

i would recommend you to use the selector like that the name of the slide class then the arrows classes

.your-class .slide-prev

explained with details in Fontawesome

and my example only for using CSS

This code only for using SVG

<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>

  $('.your-class').slick();

    body {
      background-color: pink;
      height: 100vh;
      width: 100vw;
    }
    .container {
      max-width: 400px;
      margin: 1rem auto;
      background-color: #eee;
    }

    .your-class .item {
      height: 500px;
    }

    .your-class .slick-prev {
      left: -35px;
    }

    .your-class .slick-next {
      right: -35px;
    }

     .your-class .slick-prev:before {
      font-family: "Font Awesome 5 Free"; 
      font-weight: 900; 
      content: "\f104";
      font-size: 3rem;
    }

      .your-class .slick-next:before {
      font-family: "Font Awesome 5 Free"; 
      font-weight: 900; 
      content: "\f105";
      font-size: 3rem;
    }

        <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/>
    <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
    
    <div class="container">
      <div class="your-class">
        <div class="item">your content</div>
        <div class="item">your content</div>
        <div class="item">your content</div>
      </div>
    </div>