时间戳

首页 > 解决方案 > FontAwesome 图标未加载

html - FontAwesome 图标未加载

问题描述

我是 fontawesome 的新手，我试图在旋转木马的两侧显示一个向前和向后的箭头。但是，图像没有通过。这可能与JS有关。我一直在关注一个教程，我的 fontawesome 左右说教程有 prev 和 next 的地方。这可能与 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>

标签： htmlcsscarousel

解决方案

您没有正确设置 FontAwesome。有关指导，请参阅设置说明。

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

$('.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>

推荐阅读