2017-12-08 32 views
-1

グリフコン表示をしようとしています。それはサイド・ナビゲーションの一部であり、矢印の頭が回転します...かなり標準的なベアボーンちょっと物事。ページへブートストラップグリフィコンは表示されませんが、フィドルで表示されます

リンク: http://www.nickysfolders.com/nicky-s-communicator-english.aspx?SessionThemeID=34#

glyphiconはサイドナビゲーションバーの「ニッキーのフォルダ」トップレベルのタイトルにする必要があります。

これは私がドロップダウン機能と矢印アニメーションを得るために適応した本当にクールなスニペットです...かなりクールです。 awesome, very very lightweight, portable solution to side nav dropdowns

私はすでに試みているもの:
私は、HTML内の周りのスパンを移動しようとしていると、それは
を表示しません、私はそれに色を入れている(デベロッパーツールのすべての)
私が見上げていますcommon problems glyphiconsが表示されない(最も一般的です...はい、私はすでにmax 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> 

アドバイスありがとうございました! :)

+0

を参照してください。あなたのコードで問題を見つけるのは簡単でしょう。 – Super

+0

これは私の適応した謎です:https://jsfiddle.net/ghzwwz49/ – imnickvaughn

+0

そのフィドルで働いて – imnickvaughn

答えて

0

は、私が作成したとして、すべてのコードやスクリプトあなたと実行可能なフィドルを作成するブートストラップ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>

+0

このフィドルはあなたが提案する構造と一致しませんまだそれはまだ動作します。 https://jsfiddle.net/1L3xy40k/ – imnickvaughn

+0

作成したすべてのコードとスクリプトを実行可能なフィドルで作成します。あなたのコードで問題を見つけるのは簡単でしょう。 – Super

+0

私のコードでは動作しませんが、私のコードでは動作しません – imnickvaughn

関連する問題