2017-07-15 2 views
1

私はcoreUIを発見しています。coreUiでアイコンを表示できません

私はgithubの上で見つかったこのlogin.htmlとを作成しようとしています: https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-login.html

すべてが素晴らしい作品が、ユーザーアイコンとロックのアイコンを表示することはできません。代わりに、私は両方のデフォルトのアイコンを取得します。私は含まれていcoreUIという名前のフォルダに取り組んでいます

  • のcssフォルダ

    • login.htmlには(style.cssに、シンプルなライン-icons.css gitの両方から含まれていレポ)

    • bower_componentsフォルダ(つまり含まjqueryの、bootstarpとテザー)

    となりますので、パスは正しいはずです。

    また、ブラウザの要素を調べると、CSSアイコンタブに、ロックアイコンとユーザーアイコンのコンテンツ\e08e\e005が表示されます。 しかし、同じデフォルトアイコンが表示されています。どんな助けもありがとう。

    私もregister.htmlで試しました。 https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-register.htmlでも同じ問題です。すべてのアイコンが表示されません。

    これは私のlogin.htmlと

    <!DOCTYPE html> 
    <html lang="en"> 
    
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <meta name="description" content="..."> 
        <meta name="author" content="...."> 
        <meta name="keyword" content="...."> 
    
        <!-- FavIcon link--> 
        <link rel="shortcut icon" href="../favicon.png"> 
        <!-- Icons --> 
        <link href="css/simple-line-icons.css" rel="stylesheet"> 
    
    
        <link href="css/style.css" rel="stylesheet"> 
    
        <title>Login</title> 
    
    
    
    </head> 
    
    <body class="app flex-row align-items-center"> 
        <div class="container"> 
         <div class="row justify-content-center"> 
          <div class="col-md-8"> 
           <div class="card-group mb-0"> 
            <div class="card p-4"> 
             <div class="card-block"> 
              <h1>Sign In</h1> 
              <p class="text-muted">Sign In to your account</p> 
              <div class="input-group mb-3"> 
               <span class="input-group-addon"><i class="icon-user"></i> 
               </span> 
               <input type="text" class="form-control" placeholder="Username"> 
              </div> 
              <div class="input-group mb-4"> 
               <span class="input-group-addon"><i class="icon-lock"></i> 
               </span> 
               <input type="password" class="form-control" placeholder="Password"> 
              </div> 
              <div class="row"> 
               <div class="col-6"> 
                <button type="button" class="btn btn-primary px-4">Login</button> 
               </div> 
               <div class="col-6 text-right"> 
                <button type="button" class="btn btn-link px-0">Forgot password?</button> 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%"> 
             <div class="card-block text-center"> 
              <div> 
               <h2>Sign up</h2> 
               <p>Site description....</p> 
               <button type="button" class="btn btn-primary active mt-3">Register</button> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
    
    
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/tether/dist/js/tether.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    
    </body> 
    
    </html> 
    
  • 答えて

    0

    である私は、あなたがいずれかのフォントディレクトリにフォントフォルダやフォントを追加していないと思います。

    SOフォルダを作成するフォントは、単純なアイコンのフォントファイルを追加します。既にフォントフォルダをお持ちの場合は、このフォルダにフォントを追加してください。 enter image description here

    +0

    "simple-line-icons.css"ファイルを使用してフォントをレンダリングしました。フォントフォルダにsimle行のすべてのフォントを追加した場合にのみレンダリングされます。ユーザーアイコンとロックアイコンのためです。アイコンは、simple-line-icons.cssファイルからレンダリングされる特殊なフォントです – mybestpatron

    関連する問題