gpt4 book ai didi

twitter-bootstrap - 无法正确显示 Twitter Bootstrap 字形图标

转载 作者:行者123 更新时间:2023-12-05 00:28:54 26 4
gpt4 key购买 nike

我正在处理 Angular.js Todo 应用程序视频教程,我遇到了一个问题,包括 index.html 文件中的 Twitter Bootstrap 3 字形图标(在 Chrome 和 Firefox 中,图标显示为非描述性图像)。

这就是我在 index.html 中添加 bootstrap 和 bootstrap-glyphicons css 文件的方式:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="todo.css">
</head>

这就是我稍后在文件中添加所需字形图标的方式:
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn"><i class="glyphicon glyphicon-plus"></i>Add</button>
</form>

bootstrap-glyphicons 字体文件位于 bootstrap/css/fonts 中。具体来说,这些文件是:
  • glyphiconshalflings-regular.eot
  • glyphiconshalflings-regular.otf
  • glyphiconshalflings-regular.svg
  • glyphiconshalflings-regular.ttf
  • glyphiconshalflings-regular.woff

  • 关于如何正确访问图标的任何想法?非常感谢你的帮助!

    最佳答案

    我会首先检查你的库上的版本。

    如果您使用的是 this pull request 之前的版本您可能指向不存在的 Assets 。 Bootstrap 3.0.0-wip 分支已将字形图标抽象为 this repo .

    我还会在 URL Assets 路径之前加上 /从基本 URL 调用。

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css">

    在官方的 glyphicons 着陆器上,示例使用 <span></span>而不是 <i></i>
    <span class="glyphicon glyphicon-ok"></span>

    他们有可能改变了这个约定。

    编辑

    在源代码中,您将看到 Assets 的绝对路径。仔细检查您的 fonts目录与 css 处于同一级别目录。
    src:url('../fonts/glyphiconshalflings-regular.eot');

    关于twitter-bootstrap - 无法正确显示 Twitter Bootstrap 字形图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18109748/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com