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

Question

我正在运行我的 NodeJS 服务器并在 localhost:3000 上测试它。一切正常，但字体超棒的图标显示时好像字体文件丢失了。它在 Firefox 和 Chrome 中做同样的事情。 (我什至检查了 firebug 并在 Net 选项卡中验证了所有预期的库都进入了网页。)

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

截图:

软件版本:

• 火狐 28.0
• Chrome 34.0.1847.116
• 快速 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 目录包含从 font 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')

应用程序.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