Bootstrap 3图标在Grails GSP页面中无法显示

Question

我有一个Grails应用程序并集成了Bootstrap 3。 除了我的页面上没有显示glyphicons，其他都正常。

以下是我登录页面的代码。

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

我页面上显示的是：

[橙色圆圈指示了glyphicon应该出现/显示的位置]

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/*']

Error shown in Google Chrome (F12)

- biniam

Answer 1

spring-security的规则可能未在Config.groovy上进行配置：），请参见：

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

- Ewerton Costa

Answer 2

终于找到解决办法了！

我在Config.groovy中添加了以下行，图标已经被正确显示。

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。

- biniam

Answer 3

你可以以https://github.com/glancekit/glance为例。它与grails 2.3.8和Bootstrap 3兼容。在glance中，所有Glyphicons都能正确显示。

-markus

- schneidermatic

---

谢谢。不仅仅是因为字形图标，这个应用程序也非常好。做得很棒！ - biniam

Answer 4

看起来你的语法可能有误。

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

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

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

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

- Chaos

---

这不仅仅是语法问题。请查看我发布的Chrome错误。谢谢。 - biniam

Answer 5

应该使用标签：

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

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

- user3175419