How to add Font Awesome fa-angle-right icon in my default bootstrap carousel?

Question

Please take a look in the code.

<a class="carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#my-slider" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
</a>

Answer 1

Include FA css in your html and use <i class="fas fa-angle-right"> to add the arrow.

fa or fas = Font Awesome Solid
far = Font Awesome Regular
fal = Font Awesome Light
fab = Font Awesome Brands


<i class="fa fa-camera-retro"></i>  <!-- version 4's syntax -->

<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->
<i class="far fa-camera-retro"></i> <!-- example: regular style of camera-retro -->
<i class="fal fa-camera-retro"></i> <!-- example: light style of camera-retro -->

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
  <a class="carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a class="carousel-control-next" href="#my-slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span><i class="fas fa-angle-right"></i> Next</span>
  </a>