Bootstrap 3 Glyphicons 未显示在 Grails GSP 页面中

Posted 2023-03-06

【中文标题】Bootstrap 3 Glyphicons 未显示在 Grails GSP 页面中

【英文标题】：Bootstrap 3 Glyphicons not displayed in Grails GSP Page

【发布时间】：2014-07-29 23:29:06

【问题描述】：

我有一个 grails 应用程序并集成了 Bootstrap 3。 一切正常，除了我的页面中没有显示/显示字形图标。

我的登录页面中有以下代码。

<div class="input-group">
    <span class="input-group-addon ">
        <i class="icon-user icon-color"></i>
    </span>
    <input type="text" class="form-control " placeholder="Username" required="required" />
</div>

而我页面中显示的是：

[橙色圆圈表示字形图标应该出现/显示的位置]

CSS：

@font-face 
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'),    url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

我的文件夹结构

我在 Config.groovy 中添加了 /fonts/* 之类的

// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/fonts/*']

Google Chrome (F12) 中显示错误

【参考方案1】：

您可以以https://github.com/glancekit/glance 为例。 它适用于 grails 2.3.8 和 Bootstrap 3。所有 Glyphicons 都能在一览中正确显示。

-标记

【讨论】：

谢谢。不仅适用于字形图标，而且该应用程序也非常好。干得好！

【参考方案2】：

看来您的语法可能有误。

我不确定user-color 图标，但对于user-icon，我相信类应该是：

<i class="fa fa-user"></i>

这假设您使用的是最新版本的 Font Awesome。如果您使用的是 Foundations Icon Fonts 3，则类名应以 fi- 前缀开头。对于 BS3，它应该是：

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

【讨论】：

这不仅仅是语法问题。请查看我发布的 chrome 中的错误。谢谢。

【参考方案3】：

终于找到了解决办法！

我在 Config.groovy 中添加了以下行，但未显示 Glyphicons。

grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/plugins/**', '/fonts/**']

我已经在 Config.groovy 中添加了 /fonts/* 之类的

//资源插件应该处理哪些URL模式

grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/fonts/*']

但现在，添加了 grails.resources.adhoc.includes。

【参考方案4】：

可能没有在 Config.groovy 上配置 spring-security 的规则 :)，见：

grails.plugin.springsecurity.controllerAnnotations.staticRules = [
  (...)
  '/**/fonts/**':                 ['permitAll'],
  (...)
]

【参考方案5】：

它应该使用跨度：

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

参考：http://getbootstrap.com/components/#glyphicons-how-to-use