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

Question

我在使用折叠按钮时遇到问题。我试图在按钮上显示一个字形图标，并在我单击它时使其发生变化。折叠时的向右箭头和向下箭头。在其他页面上，字形图标起作用。这个虽然在导航栏上。它显示为一个盒子，里面有十六进制代码。我已经看了几个小时的问题，他们几乎错过了字体系列。我有一个工作正常的部分，所以它是不同的，我找不到问题。

<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-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 */
}

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