Bootstrap 3 collapse change chevron icon on click

Question

I have read all related questions regarding my question and have tried them all to no avail. I can\'t seem to make my code work, even though I \"think\" almost every code I

Answer 1

For change collapse icon in Bootstrap 4 with minimal html change, I've done

• Add to css:

  a[data-toggle="collapse"]:after {
      font-family: 'Glyphicons Halflings';
      content: "\e114";
      float: right;
      color: #4285F4;
  }
  a[data-toggle="collapse"].collapsed:after {
      content: "\e080";
  }
  @font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
      url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
      url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
      url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  

• Put fonts in proper place, related to css:

  \css\style.css
  \fonts\glyphicons-halflings-regular.eot
  \fonts\glyphicons-halflings-regular.svg
  \fonts\glyphicons-halflings-regular.ttf
  \fonts\glyphicons-halflings-regular.woff
  \fonts\glyphicons-halflings-regular.woff2
  

• And add class="collapsed" to all collapsed (by default) links:

  Collapsed link