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