Question

我是 fontawesome 的新手，我正在尝试在旋转木马的两侧显示一个向前和向后的箭头。但是，图像没有通过。这可能与JS有关。我一直在关注教程，我的 fontawesome 在教程上一页和下一页的位置左右说。这可能与 JS 混淆，但我认为这不是我无法首先显示箭头的原因。 f0606 是 fontawesome 箭头的 unicode。

$('.post-wrapper').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  nextArrow: $('.right'),
  leftArrow: $('.left'),
});

/*  Post Slider */

.post-slider {
  position: relative;
  border: 1px solid black;
}

.post-slider .slider-title {
  text-align: center;
  margin: 30px auto;
  font-family: 'candal, serif;
}

.post-slider .post-wrapper {
  width: 84%;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
  border: 1px solid black;
}

.post-slider .post-wrapper .post {
  height: 200px;
  width: 300px;
  margin: 0px 10px;
  display: inline-block;
  background: blue;
}

<!--Font Awesome-->
<script src="https://use.fontawesome.com/8b8dadb668.js"></script>

<!-- Carousel -->
<div class="page-wrapper">
  <!-- Carousel-Slider -->
  <div class="post-slider">
    <h1 class="slider-title">Trending Posts</h1>
    <i class="fas fa-arrow-left">'f060'</i>
    <i class="fas fa-arrow-right"></i>
    <div class="post-wrapper">
      <div class="post">
        <div class="post">1</div>
        <div class="post">2</div>
        <div class="post">3</div>
        <div class="post">4</div>
        <div class="post">5</div>
      </div>
    </div>
    <!--Post Slider-->
  </div>
  
  <!--Slick Carousel-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Answer 1

您没有正确设置 FontAwesome。请参阅 Setup Instructions 以获取指导。

在下面的示例中，您可以看到图标正确显示。

$('.post-wrapper').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  nextArrow: $('.right'),
  leftArrow: $('.left'),
});

/*  Post Slider */

.post-slider {
  position: relative;
  border: 1px solid black;
}

.post-slider .slider-title {
  text-align: center;
  margin: 30px auto;
  font-family: 'candal, serif';
}

.post-slider .post-wrapper {
  width: 84%;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
  border: 1px solid black;
}

.post-slider .post-wrapper .post {
  height: 200px;
  width: 300px;
  margin: 0px 10px;
  display: inline-block;
  background: blue;
}

<!--Font Awesome-->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />

<!-- Carousel -->
<div class="page-wrapper">
  <!-- Carousel-Slider -->
  <div class="post-slider">
    <h1 class="slider-title">Trending Posts</h1>
    <i class="fas fa-arrow-left">'f060'</i>
    <i class="fas fa-arrow-right"></i>
    <div class="post-wrapper">
      <div class="post">
        <div class="post">1</div>
        <div class="post">2</div>
        <div class="post">3</div>
        <div class="post">4</div>
        <div class="post">5</div>
      </div>
    </div>
    <!--Post Slider-->
  </div>
  
  <!--Slick Carousel-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

FontAwesome 图标未加载

1 个答案: