I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature.
Here is the link to the page:
The glyphicon should be visible on the "Nicky's Folders" top level title in the side nav.
I found this cool snippet for dropdown functionality and arrow animation: check out this lightweight solution for side nav dropdowns
So far, I have tried moving the span around within the HTML and changing its color using DevTools. I've also looked into common issues related to glyphicons not displaying, but to no avail.
I suspect it might just be a simple mistake that I'm overlooking...
You can see that the glyph icons work in the fiddle example below (unfortunately the JavaScript doesn't yet): https://jsfiddle.net/vaughnick/f4gkxx4n/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="accordion" style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
<a href="#">Nicky's Folders<span class="small-reg">®</span></a>
<hr class="half-rule" />
<ul id="collapseExample" class="collapse">
<li style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
<a href="#">2-Pockets</a>
.....(remaining HTML code here)....
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Any advice or assistance would be greatly appreciated! :)