Highlighted

Bootstrap Accordion Icon

Contributor ,
Mar 18, 2019

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?

Views

784

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap Accordion Icon

Contributor ,
Mar 18, 2019

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?

Views

785

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 18, 2019 0
Adobe Community Professional ,
Mar 18, 2019

Copy link to clipboard

Copied

Those are Font Awesome icons.  You need to  add the  Font Awesome library to your <head> tag.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 1
LEGEND ,
Mar 18, 2019

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 2
Contributor ,
Mar 20, 2019

Copy link to clipboard

Copied

I have tried as you have suggested ,now it looks like below. eZeemeat - A ZION Group

ACCORD_ICONS2.PNG

Kindly help me.Thanks in advance.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0
LEGEND ,
Mar 20, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 1
Contributor ,
Mar 20, 2019

Copy link to clipboard

Copied

Thank you..it works good.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0