Bootstrap Glyphicon not displaying but does in Fiddle

Question

I am trying to make the glyphicon display. It is part of a side nav and the arrow head rotates down... pretty standard barebones kinda thing.

Link to page: http://www.nickysfolders.com/nicky-s-communicator-english.aspx?SessionThemeID=34#

The glyphicon should be on the "Nicky's Folders" top level title on the side nav.

This is the really cool snippet I adapted to get the dropdown function and arrow animation... pretty cool. awesome, very very lightweight, portable solution to side nav dropdowns

Things I have already tried:
I have tried moving the span around within the html and it won't display
I have put a color on it (all in DevTools)
I have looked up common problems involving glyphicons not displaying (most common... yes I am loading 3.2 from the max cdn already).

I bet it is just a simple mistake I am making...

As you can see the glyph icons in the fiddle work (unfortunately js 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">
    <style>
      [data-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
      }

    </style>
  </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">&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>
          <ul id="collapseExample" class="collapse">
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Version II<small>(NF VER II)</small></a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Communicator</a>
              <ul>
                <li><a href="#">English</a></li>
                <li><a href="#" style="overflow: wrap;">Spanish Multilanguage</a></li>
              </ul>
            </li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Class Work</a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>Homework</a></li>
            <li><a href="#">Nicky's<span class="small-reg">&reg;</span>CPA</a>
              <ul>
                <li><a href="#">Version 10</a></li>
                <li><a href="#">Version 11</a></li>
              </ul>
            </li>
          </ul>

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

Thanks for any advice/help! :)

create run-able fiddle with you all code and script as I have created. It will be easy to find out issue in your code. — Billu, Dec 08 '17 at 20:35

score 0 · Answer 1 · answered Dec 08 '17 at 18:46

See the working examples of Bootstrap Glyphicon

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Zoom-in Glyph</h2>
      <p>Zoom-in icon: <span class="glyphicon glyphicon-zoom-in"></span></p>    
      <p>Zoom-in icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-zoom-in"></span>
        </a>
      </p>
      <p>Zoom-in icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-zoom-in"></span> Zoom-in
        </button>
      </p>
      <p>Zoom-in icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-zoom-in"></span> Zoom-in
        </a>
      </p> 
      <p>Unicode:
        <span class="glyphicon">&#xe015;</span>
      </p> 
    </div>
  </body>
</html>

This fiddle doesn't match the structure you propose yet it still works. https://jsfiddle.net/1L3xy40k/ — imnickvaughn, Dec 08 '17 at 20:18
create run-able fiddle with you all code and script as I have created. It will be easy to find out issue in your code. — Billu, Dec 08 '17 at 20:35

Bootstrap Glyphicon not displaying but does in Fiddle

1 Answers1