Instructions to create plus (plus) and minus (minus) Accordion in Bootstrap 4


How to create plus (plus) and minus (minus) buttons for Bootstrap 4 is quite simple, you just need to add a few lines of CSS.


Commonly used Accordion to design FAQ (Frequently Asked Questions).



Request


  • Since we use the FontAwesome icon to create the + and - buttons, we will add FontAwesome in the header.



Making


To see how to create Accordition you can read the instructions here




You see you will have an id #accordion And I will code the following CSS:


#accordion .card-header .card-link:after {
font-family: 'FontAwesome';
content: "f068"; // dấu -
float: right;
}

#accordion .card-header .card-link.collapsed:after {
content: "f067"; // dấu +
}

Also you can learn how to insert fontAwesome into CSS at the following link:


http://astronautweb.co/snippet/font-awesome/