title: Why aren't font-awesome icons working?
body: <p>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.)</p>
  
  <p>EDIT: Most of the details are irrelevant. Read the accepted answer before wasting time reading my detailed question.</p>
  
  <h2>Screenshot:</h2>
  
  <p><img src="https://i.stack.imgur.com/dSLdU.png" alt="enter image description here"></p>
  
  <h2>Software Versions:</h2>
  
  <ul>
  <li>Firefox 28.0</li>
  <li>Chrome 34.0.1847.116</li>
  <li>Express 3.2.6</li>
  <li>Jade 1.3.1</li>
  <li>Less 1.7.0</li>
  <li>nodemon 1.0.17</li>
  <li>Font-Awesome 4.0.3</li>
  <li>Bootstrap 3.1.1</li>
  <li>JQuery 1.11.0</li>
  </ul>
  
  <h2>Project Structure:</h2>
  
  <pre><code>MyApp
  +--node_modules
  |--public
  |  +--stylesheets
  |  |--lib
  |  |  +--bootstrap
  |  |  +--font-awesome
  |  |  +--jquery
  |--routes
  |  |--index.js
  |--views
  |  |--index.jade
  |--app.js
  |--package.json
  </code></pre>
  
  <p>NOTE: The font-awesome directory contains all contents extracted from the font awesome <a href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip" rel="nofollow noreferrer">download link</a>.</p>
  
  <h2>index.jade:</h2>
  
  <pre><code>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')
  </code></pre>
  
  <h2>app.js:</h2>
  
  <pre><code>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'));
  });
  </code></pre>
  
  <h2>index.js:</h2>
  
  <pre><code>exports.index = function(req, res){
      res.render('index', { title : 'MyApp' });
  };
  </code></pre>