CSS實現bootstrap的Collapse動態摺疊和展開時箭頭圖標

CSS實現bootstrap的Collapse動態摺疊和展開時箭頭圖標

bootstrap的摺疊代碼如下

<div class="accordion" id="accordionExample">
	<div class="card">
		<!-- 重點是在這裏的parent-nav 和  collapsed類標籤 -->
		<div class="parent-nav collapsed" id="headingTwo" data-toggle="collapse" data-target="#collapseOne">
		<i class="fa fa-bars menu-bars" aria-hidden="true"></i>
			<label>個人中心</lable>
		</div>
		<div id="collapseOne" class="collapse child-nav" aria-labelledby="headingTwo" data-parent="#accordionExample">
			<a href="#">XXX</a>
			<a href="#">YYY</a>
			<a href="#">ZZZ</a>
		</div>
	</div>
</div>

這裏我是摘抄官網的代碼，做了部分修改，主要是實現了bootstrap的摺疊功能，這裏不是我說的重點。我想說的重點是當摺疊功能摺疊和展開的時候如何顯示不同的圖標呢？
首先需要引入字體圖標庫，如果沒有，在字體圖標的官網下載。

<link rel="stylesheet" type="text/css" href="../../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" />

之後在官網找到想要的圖標

複製圖標名稱，打開font-awesome.min.css文件或者font-awesome.css文件，使用Ctrl+F查詢查詢出對應的代碼

然後CSS實現的代碼如下：

/**箭頭圖標合起來的樣式*/
/** .parent-nav表示父標籤 after表示在此後加入字體圖標  */
.parent-nav:after {
	content: "\f077";/** 箭頭向上圖標*/
	font-family: FontAwesome;
}

/**箭頭圖標展開式時的樣式*/
/** collapsed是bootstrap的屬性，表示父標籤展開的時候加入的圖標 after表示在此後加入字體圖標  */
.parent-nav.collapsed:after {
	content: "\f078";/** 箭頭向下圖標*/
	font-family: FontAwesome;
}

over，剩下的位置，美觀什麼的自己調整。