结合使用Awesome 5字体和Bootstrap 3折叠组件-折叠时更改箭头图标？

Question

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

当单击可折叠元素时，如何使“真棒字体”箭头图标指向向下？

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>

Answer 1

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

HTML

简单的可折叠示例。注意.collapsed类和每个<i class="fas"></i>上的card-header。您可以根据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/aq9Laaew/127966/