【问题标题】:Glyphicons from bootstrap doesn't show up引导程序中的字形图标不显示
【发布时间】:2012-07-12 17:27:24
【问题描述】:
<div class="container-fluid">
  <div class="sidebar left">
    <div id="app-navigation" class="well">
      <h5>Administration</h5>
      <ul class="administration-list">
        <li class="user"><a href="#user">User</a></li>
        <li class="emails"><a href="#emails">Emails</a></li>
        <li class="settings"><a href="#Settings">Settings</a></li>
        <li class="logs"><a href="#Logs">Logs</a></li>
        <li class="help"><a href="#Help">Help</a></li>
      </ul>
      <h5>Managing tools</h5>
      <ul class="tools-list">
        <li class="ressource"><a href="#Ressources"><i class="icon-home icon-white" </i>Ressources</a></li>
        <li class="playlist"><a href="#Playlist">Playlist</a></li>
        <li class="schedule"><a href="#Schedule">Schedule</a></li>
        <li class="stations"><a href="#Stations">Stations</a></li>
      </ul>
    </div>
  </div>
</div>

我不明白为什么我的图标不显示。我正在开始一个新项目,并决定尝试initializrbootstrap。只是不能让那些图标出现。在我的文本之前似乎有一个不可见的图标......我也检查了文档,here。我还检查了我的 boostrap.less、sprites.less 和 variables.less(一切似乎都还好......)。

我的变量设置正确,我的图片 (PNG) 在我的 ../img 文件夹中。

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

【问题讨论】:

  • 检查您的资产文件夹以查看您的图标图像是否存在。
  • 您是否尝试将 '../img/' 更改为 '/img/'?看起来您的 img 文件夹未与 css 文件夹配对。
  • 是的。我也这样做了..但我想我找到了答案...谢谢!

标签: html css twitter-bootstrap less


【解决方案1】:

文件 variables.less 位于 bootstrap 文件夹中,因此您需要再上一层才能进入根目录。

尝试将路径设置为:

@iconSpritePath:          "../../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../../img/glyphicons-halflings-white.png";

【讨论】:

  • 我不明白他们为什么没有把它/或设置正确的值与他们的基础设施......
  • 作为对此的更新,自引导程序 3 起的变量称为 @icon-font-path,默认为 "../fonts/"
【解决方案2】:

在最新的 Bootstrap 中,图标包含在新类 glyphicon 中:

<i class="glyphicon glyphicon-heart"></i>

在某些情况下,这可能是问题所在。

【讨论】:

    【解决方案3】:

    我必须将 img 文件夹从 bootstrap 复制到 less 文件夹中...或者您可以将变量更改为指向 root/img 文件夹。

    【讨论】:

      【解决方案4】:

      打开“lib”文件夹中的rewrites.php 文件。在函数 'roots_add_rewrites($content)' 中添加以下行:

          'assets/fonts/(.*)'    => THEME_PATH . '/assets/fonts/$1',
      

      函数应该如下所示:

      function roots_add_rewrites($content) {
        global $wp_rewrite;
        $roots_new_non_wp_rules = array(
          'assets/css/(.*)'      => THEME_PATH . '/assets/css/$1',
          'assets/js/(.*)'       => THEME_PATH . '/assets/js/$1',
          'assets/img/(.*)'      => THEME_PATH . '/assets/img/$1',
          'assets/fonts/(.*)'    => THEME_PATH . '/assets/fonts/$1',
          'plugins/(.*)'         => RELATIVE_PLUGIN_PATH . '/$1'
        );
        $wp_rewrite->non_wp_rules = array_merge($wp_rewrite->non_wp_rules, $roots_new_non_wp_rules);
        return $content;
      }
      

      【讨论】:

      • 对 PHP 用户来说也许不错,但是有没有迹象表明这个问题与 PHP 有任何关系?
      猜你喜欢
      • 1970-01-01
      • 2014-10-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-10
      • 2017-01-29
      • 2017-06-23
      • 1970-01-01
      相关资源
      最近更新 更多