我在崩溃按钮时遇到问题。我试图在按钮上显示一个glyphicon,并在我点击它时更改它。折叠时向右箭头和向下箭头。在其他页面上,glyphicons工作。这个虽然在导航栏上。它显示为内部带有十六进制代码的框。我一直在寻找问题几个小时,他们几乎错过了字体系列。我有一个工作的部分,所以它不同,我无法找到问题。
<button type="button" aria-expanded="false" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Ouvrir la navigation</span>
</button>
这是glyphicons工作的css部分:
.liens:before {
content: "\e144";
font-family: 'Glyphicons Halflings';
font-size: 12px;
float: left;
margin-top: 0;
margin-left: -20px;
color: #2A3E53;
}
我可以在ul中的每个项目上看到glyphicon但是在nav上我有完全相同的css但它显示为带有十六进制代码的框,即:e250
button.btn.collapsed:before {
content: "\e250";
font-family: 'Glyphicons Halflings' !important;
font-size: 12px;
float: left;
color: #2A3E53;
}
button.btn:before {
content: "\e252";
font-family: 'Glyphicons Halflings' !important;
font-size: 12px;
float: left;
color: #2A3E53;
}
这就是我得到的:
答案 0 :(得分:1)
您可以探索bootstrap.css文件如何定义Glyphicons Halflings
font-family:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
所以我想你需要检查glyphicons-halflings-regular.*
文件的路径。
我已使用Bootstrap的default navbar作为示例,删除了.btn
类并简化了CSS。请检查结果。这是你想要实现的目标吗?
.navbar-toggle:after {
content: "\e252"; /* glyphicon-triangle-bottom */
font-family: 'Glyphicons Halflings';
}
.navbar-toggle.collapsed:after {
content: "\e250"; /* glyphicon-triangle-right */
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-example" aria-expanded="false">
<span class="sr-only">Ouvrir la navigation</span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-example">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
&#13;