我正在运行我的 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' });
};
最佳答案
关于font-awesome - 为什么 Font Awesome 图标不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22952383/