字体真棒图标未显示在玉模板中答案

【问题标题】：Font awsome icons not showing within jade templates字体真棒图标未显示在玉模板中
【发布时间】：2015-11-14 03:52:22
【问题描述】：

我在我的 node.js/express 应用程序中使用 Jade 进行模板化。但是当我尝试使用字体真棒时，图标不显示，只列出项目符号。我已经尝试了搜索引擎找到的所有方法。比如 fa.fa-globe 问题。这是取自footer.jade的代码

 span This is some other footer stuff.
    ul
      li.fa.fa-google-plus
        a(href='#')
        i.fa.fa-facebook
      li
        a(href='#')
        i.fa.fa-lg.fa-twitter
      li
        a(href='#')
        i.fa.fa-lg.fa-google-plus
      li
        a(href='#') 
        span.fa.fa-lg.fa-linkedin
 span and some more footer stuff.

正如你在上面看到的，我尝试了多种方法，i、span 和 classes

而我的layout.jade如下：

doctype html
html
  head
    title= title
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css', rel='stylesheet', media='screen')
    link(href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  include ./header.jade
  body(style="padding-bottom:10rem;")
    block content

  script(src='http://code.jquery.com/jquery.js')
  script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')

谢谢

【问题讨论】：

标签： node.js express twitter-bootstrap-3 pug font-awesome

【解决方案1】：

主要问题是您缺少字体真棒<link> 的rel='stylesheet' 属性。这将使字体很棒的图标正常工作。

但是，如果您想用图标替换列表中的项目符号，则需要在 font-awesome 示例页面上将页脚的列表项调整为 shown。例如：

span Hello world
  ul.fa-ul
    li
      i.fa-li.fa.fa-facebook
      a(href='#') Facebook
    li
      i.fa-li.fa.fa-lg.fa-twitter
      a(href='#') Twitter
    li
      i.fa-li.fa.fa-lg.fa-google-plus
      a(href='#') Google+
    li
      i.fa-li.fa.fa-lg.fa-linkedin
      a(href='#') LinkedIn

【讨论】：

谢谢，太好了。它现在将它们显示为垂直列表，是否有任何快速解决方法可以使它们水平？

【解决方案2】：

如果您在图标所在的位置看到一个空符号，您可能需要在布局头中添加编码：

meta(charset="utf-8")

【讨论】：