Glyphicon显示为内部十六进制代码的框

Question

我在崩溃按钮时遇到问题。我试图在按钮上显示一个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;
}

这就是我得到的：

Answer 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。请检查结果。这是你想要实现的目标吗？

＆＃13;

＆＃13;

.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;

＆＃13;

＆＃13;