Why aren't font-awesome icons working?

Question

I'm running my NodeJS server and testing it on localhost:3000. Everything is working fine, but the font-awesome icons are showing up as if the font files are missing. It does the same thing in Firefox and Chrome. (I even checked in firebug and verified in the Net tab that all expected libraries were coming to the web page.)

EDIT: Most of the details are irrelevant. Read the accepted answer before wasting time reading my detailed question.

Screenshot:

Software Versions:

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

Project Structure:

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

NOTE: The font-awesome directory contains all contents extracted from the 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')

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

You have to have class fa as well as fa-globe from this article

so in your code

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