将 Font Awesome 5 与 Bootstrap 3 折叠组件一起使用——在折叠时更改箭头图标？

Posted 2023-02-22

【中文标题】将 Font Awesome 5 与 Bootstrap 3 折叠组件一起使用——在折叠时更改箭头图标？

【英文标题】：Using Font Awesome 5 with Bootstrap 3 Collapse Component -- change arrow icon on collapse?

【发布时间】：2019-01-09 12:44:54

【问题描述】：

我正在尝试将 Font Awesome 5 与 Bootstrap 4 一起用于我的 VUEJS SPA 中的手风琴/折叠部分。

当单击可折叠元素时，如何使 Font Awesome 箭头图标指向向下？

Paste bin link

<template>
    <div>
      <div class='card-header' data-toggle='collapse' href='#collapseZero'>
          <a class='card-title'>Heading Title One</a>
          <font-awesome-icon :icon='faAngleUp' class='float-right'></font-awesome-icon>
              </div>
                  <div id='collapseOne' class='card-body collapse' data-parent='#accordion'>
                      Content blah
                  </div>
      </div>
</template>

<script>
import  faAngleUp, faAngleDown  from '@fortawesome/free-solid-svg-icons';

export default 
  name: 'MyName'
  computed: 
    faAngleUp() 
      return faAngleUp;
    
    faAngleDOwn() 
        return faAngleDown;
    
  
</script>

【参考方案1】：

我不知道您是否正在寻找纯 CSS 方法，但以防万一：

html

简单的例子。注意每个card-header 上的.collapsed 类和<i class="fas"></i>。您可以根据card-header 是否具有.collapsed 类来更改图标的内容以显示向上或向下箭头。

<div class="accordin">
    <div class="card">
        <div class="card-header collapsed" data-toggle="collapse" 
          data-target="#collapse-card-1">
            Card 1
            <span class="float-right">
                <i class="fas"></i>
            </span>
        </div>
        <div id="collapse-card-1" class="collapse" data-parent=".accordin">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header collapsed" data-toggle="collapse" 
          data-target="#collapse-card-2">
            Card 2
            <span class="float-right">
                <i class="fas"></i>
            </span>
        </div>
        <div id="collapse-card-2" class="collapse" data-parent=".accordin">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header collapsed" data-toggle="collapse" 
          data-target="#collapse-card-3">
            Card 3
            <span class="float-right">
                <i class="fas"></i>
            </span>
        </div>
        <div id="collapse-card-3" class="collapse" data-parent=".accordin">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
</div>

CSS

.card-header i.fas:before 
    content: "\f107";    /* angle-down */


.card-header.collapsed i.fas:before 
    content: "\f106";    /* angle-up */

小提琴演示

http://jsfiddle.net/davidliang2008/tgq2j0fh/