Html 引导程序中的字形没有出现

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11460713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:37:38  来源:igfitidea点击:

Glyphicons from bootstrap doesn't show up

htmlcsstwitter-bootstrapless

提问by fneron

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

I don't understand why my icon doesn't show up. I'm starting a new project and decided to try out initializrwith bootstrap. Just can't make those icon appear. It's seems there's an invisible icon just before my text... I have check the documentation too, here. I also checked within my boostrap.less, sprites.less and variables.less (everything seems okay...).

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

My variable are correctly set and my image (PNG) are in my ../img folder.

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

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

回答by Bruno Campos

The file variables.less is at the bootstrap folder, so you need one more level to get to root.

文件 variables.less 位于 bootstrap 文件夹中,因此您需要再上一层才能获得 root 权限。

Try to set the path to:

尝试将路径设置为:

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

回答by Duther

In the newest Bootstrap icons are included with the new class glyphicon:

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

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

In some cases that will probably be the problem.

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

回答by fneron

I had to copy the img folder from bootstrap in the less folder... or you could change the variable to point to root/img folder.

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

回答by Daniel Cook

Open the rewrites.php file in the 'lib' folder. Add the following line within the function 'roots_add_rewrites($content)':

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

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

The function should look like this:

该函数应如下所示:

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