0

I have a slideshow in my website and I wanted to use the cool looking content built-in with CSS. I am pretty sure my code is right, but for some reason, the arrows show up as boxes. I don't know what is happening. Here is my code:

.slider .nav-next:before,
.slider .nav-previous:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

.slider .nav-next:before,
.slider .nav-previous:before {
  position: relative;
}

.slider .nav-next {
  right: 0;
}

.slider .nav-next:before {
  content: '\f105';
  right: -0.05em;
}

.slider .nav-previous {
  left: 0;
}

.slider .nav-previous:before {
  content: '\f104';
  left: -0.05em;
}
<span class="nav-previous"></span>
<div class="viewer">
  <div class="reel">
    <div class="slide">
      <img src="images/gameplanImage.png" class="image fit" alt="" />
    </div>
    <div class="slide">
      <img src="images/iri.jpg" alt="" />
    </div>
    <div class="slide">
      <img src="images/slide03.jpg" alt="" />
    </div>
  </div>
</div>
<span class="nav-next"></span>
m4n0
  • 29,823
  • 27
  • 76
  • 89

2 Answers2

0

Maybe the problem is that in your HTML you are using div class = "slide" and in your CSS you are editing the style of .slider {... try editing the div class's on your HTML to slider and see if that works.

Shay
  • 57
  • 1
  • 4
0

Why don't you just include fontawesome cdn in your hrml head an then use this inside tags.

<i class="fas fa-arrow-right"></i>

You are getting boxes instead of arrows because they are not been referenced in the right way.

vitomadio
  • 1,140
  • 8
  • 14