为什么font-awesome图标不起作用？

Question

我正在运行我的NodeJS服务器并在localhost：3000上测试它。一切都工作正常，但字体很棒的图标显示，好像缺少字体文件。它在Firefox和Chrome中做同样的事情。 （我甚至检查了萤火虫并在网络标签中验证了所有预期的图书馆都进入了网页。）

编辑：大多数细节都无关紧要。在浪费时间阅读我的详细问题之前，请阅读已接受的答案。

截图：

软件版本：

• Firefox 28.0
• Chrome 34.0.1847.116
• Express 3.2.6
• Jade 1.3.1
• 少1.7.0
• nodemon 1.0.17
• Font-Awesome 4.0.3
• Bootstrap 3.1.1
• JQuery 1.11.0

项目结构：

MyApp
+--node_modules
|--public
|  +--stylesheets
|  |--lib
|  |  +--bootstrap
|  |  +--font-awesome
|  |  +--jquery
|--routes
|  |--index.js
|--views
|  |--index.jade
|--app.js
|--package.json

注意：font-awesome目录包含从字体awesome download link中提取的所有内容。

index.jade：

doctype html
html
    head
        title= title
        meta(charset='utf-8')
        link(rel='stylesheet', href='/lib/bootstrap/css/bootstrap.css')

        // I tried font-awesome locally:
        link(rel='stylesheet', href='/lib/font-awesome/css/font-awesome.css')

        // And from the CDN:
        //link(rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')

        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        span Text before icons:
        i.fa-globe
        i.fa-plus

    script(type='text/javascript', src='/lib/jquery/js/jquery.js')
    script(type='text/javascript', src='/lib/underscore/js/underscore.js')
    script(type='text/javascript', src='/lib/bootstrap/js/bootstrap.js')

app.js：

var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('env', 'development');
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if('development' === app.get('env')){
    app.use(express.logger('dev'));
    app.use(express.errorHandler());
}

// routes
app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

index.js：

exports.index = function(req, res){
    res.render('index', { title : 'MyApp' });
};

Answer 1

您必须在this article

中拥有课程fa和fa-globe

所以在您的代码中

span Text before icons:
i.fa.fa-globe
i.fa.fa-plus