css - 无法在圆滑的箭头中添加FontAwesome 5

我正在尝试使用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";
}

如果我删除


  字号：0


然后会显示“超赞字体”图标，但带有文本“上一个/下一个”。我只需要没有文本的图标。

最佳答案

多数民众赞成在应如何

我建议您使用选择器，例如幻灯片类的名称，然后是箭头类

.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>


    		

关于css - 无法在圆滑的箭头中添加FontAwesome 5，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50550206/