无法在光滑箭头中添加 FontAwesome 5

Question

我正在尝试使用 FontAwesome 5 使用 CSS 伪元素来设置 Slick 箭头的样式。根据 FontAwesome 的文档，我还在加载 FantAwesome 之前添加了这一行。

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

我的CSS如下：

.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";
}

如果我删除

font-size: 0

然后显示 Font Awesome 图标，但带有文本 "previous/next"。我只需要没有文字的图标。

Answer 1

应该是这样

我会推荐你使用这样的选择器幻灯片的名称class然后箭头classes

.your-class .slide-prev

在 Fontawesome

中有详细说明

而我的示例仅用于使用 CSS

此代码仅用于使用 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>

无法在光滑箭头中添加 FontAwesome 5

Can't add FontAwesome 5 in slick arrow

css

slick.js

font-awesome-5