Known Participant

Answered

Bootstrap Accordion Icon

Forum|Forum|6 years ago
March 18, 2019
2 replies
1758 views

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.

This topic has been closed for replies.

Correct answer osgood_

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?

O

osgood_

Legend

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>

<title>Bootstrap Accordion Icons</title>

<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 1

</a>

</h4>

</div>

<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>

Section 2

</a>

</h4>

</div>

<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>

Section 3

</a>

</h4>

</div>

<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>

</section>

</body>

RoopavathyAuthor

Known Participant

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

Kindly help me.Thanks in advance.

O

osgood_Correct answer

Legend

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?