Question

我正在尝试制作字形显示。它是侧导航的一部分，箭头向下旋转......非常标准的准系统有点像。

链接到页面： http://www.nickysfolders.com/nicky-s-communicator-english.aspx?SessionThemeID=34#

glyphicon应位于侧面导航栏的“Nicky's Folders”顶级标题上。

这是我用来获得下拉功能和箭头动画的非常酷的片段......很酷。 awesome, very very lightweight, portable solution to side nav dropdowns

我已经尝试过的事情：
我试过在html中移动跨度，它不会显示
我在它上面放了一个颜色（全部在DevTools中）
我查了common problems涉及没有显示的字形（最常见......是的，我已经从最大cdn加载3.2）。

我敢打赌，这只是我犯的一个简单错误......

正如你可以看到小提琴作品中的字形图标（不幸的是js还没有）：
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>

感谢您的任何建议/帮助！：）

Answer 1

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

Bootstrap Glyphicon不显示，但在小提琴中显示

1 个答案: