如何在我的默认引导轮播中添加 Font Awesome fa-angle-right 图标？答案

【问题标题】：How to add Font Awesome fa-angle-right icon in my default bootstrap carousel?如何在我的默认引导轮播中添加 Font Awesome fa-angle-right 图标？
【发布时间】：2019-09-11 17:20:22
【问题描述】：

请看一下代码。

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

【问题讨论】：

我在这里没有看到任何fa-* 类
这是默认的引导轮播代码。你尝试过什么，你希望达到什么目标？
我应该在哪里添加这个fa-#来显示图标？

标签： html css bootstrap-4 carousel font-awesome

【解决方案1】：

在您的 html 中包含 FA css 并使用 <i class="fas fa-angle-right"> 添加箭头。

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>

【讨论】：

fas 表示 font awesome solid，fab 表示 font awesome 品牌，far 表示 font awesome 常规，简述

【解决方案2】：

只需在您的页面上包含 font awesome 类

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <a class="carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span><i class="fa fa-angle-left"></i>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>Next<i class="fa fa-angle-right"></i></span>
  </a>

希望这会有所帮助。

【讨论】：

【解决方案3】：

对于 Bootstrap 4 替换

 <span class="carousel-control-next-icon" aria-hidden="true"></span>

带有 FontAwesome 标签

<i class="fa fa-angle-right">

【讨论】：