Copy link to clipboard
Copied
Hi all,
Here is my link. eZeemeat - A ZION Group
I have used accordion from this link Bootstrap Accordion : Demo 56
I have included it in my page .But I couldn't see the + icon.What is the css style need to be changed?Kindly help .
Thanks in advance.
Remove the original css that was creating your first attempt at adding the icons. You must know which css file that is in right, as you probably will have put it in there?
Copy link to clipboard
Copied
Those are Font Awesome icons. You need to add the Font Awesome library to your <head> tag.
Copy link to clipboard
Copied
Yeah, Font Awesome linked to the page is required. Example below using your accordion code. The example you posted somehow gets the plus/minus icons to be slighly less heavy in weight using the standard free icons.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Bootstrap Accordion Icons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.panel-title {
position: relative;
}
.panel-title > a:before {
content: "\f068";
font-family: "FontAwesome";
font-weight: 900;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
border: 1px solid #c52d37;
font-size: 15px;
color: #c52d37;
position: absolute;
top: 2px;
right: 0;
transition: all 0.5s ease 0s;
}
.panel-title a.collapsed:before{
content: "\f067";
}
</style>
</head>
<body>
<section class="ftco-section testimony-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
Copy link to clipboard
Copied
I have tried as you have suggested ,now it looks like below. eZeemeat - A ZION Group
Kindly help me.Thanks in advance.
Copy link to clipboard
Copied
Remove the original css that was creating your first attempt at adding the icons. You must know which css file that is in right, as you probably will have put it in there?
Copy link to clipboard
Copied
Thank you..it works good.