Javascript 字体未在引导中加载图标
我正试图通过网页来实现引导和字体真棒的简单要求。我设法加载了引导CSS,但Font awesome无法正常工作 这就是我得到的结果: 我的代码如下。我在这里做错了什么 资源:可在这里找到 package.jsonJavascript 字体未在引导中加载图标,javascript,twitter-bootstrap-3,font-awesome,webpack,webpack-style-loader,Javascript,Twitter Bootstrap 3,Font Awesome,Webpack,Webpack Style Loader,我正试图通过网页来实现引导和字体真棒的简单要求。我设法加载了引导CSS,但Font awesome无法正常工作 这就是我得到的结果: 我的代码如下。我在这里做错了什么 资源:可在这里找到 package.json { "name": "", "version": "0.0.1", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",
{
"name": "",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack -w"
},
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"expose-loader": "^0.7.0",
"file-loader": "^0.8.4",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.2"
},
"dependencies": {
"admin-lte": "^2.3.2",
"bootstrap": "^3.3.5",
"bootstrap-webpack": "0.0.5",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^0.8.2",
"font-awesome": "^4.4.0",
"font-awesome-webpack": "0.0.4",
"imports-loader": "^0.6.5",
"jquery": "^2.1.4",
"less": "^2.5.3",
"less-loader": "^2.2.1"
}
}
入口点:index.js
var $ = require('jquery');
require('expose?$!expose?jQuery!jquery');
require("bootstrap-webpack");
require('./node_modules/font-awesome/css/font-awesome.css');
require('./resources/css/style.css');
$('h1').html('<i class="fa fa-bars"></i> this is bootstrap');
console.log('hi there');
module.exports = {
entry: './index.js',
output: {
path: 'public/assets/',
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /\.css$/, loader: "style!css!" },
{ test: /\.less$/, loader: "style!css!less!" },
//bootstrap
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
//font-awesome
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
}
检查F12调试控制台,并查看web浏览器有关给定文件错误的详细信息 您的web服务器没有提供具有正确mime类型的.woff和.woff2文件,因此它们根本不会从浏览器客户端角度加载 您需要修改web服务器端以添加对.woff文件的支持,例如,在web.config中的IIS Express上,您应该具有:
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
我知道这是一个有一年历史的问题,但万一有人最终从谷歌得到这个问题: 有一个已知的问题。这不会发生在产品构建中,但在开发模式下渲染方块时仍然令人讨厌
在修复此问题之前,您可以禁用css加载程序源映射以查看在开发中正确呈现的字体。在你的网页配置中找到一个写
css?sourceMap
的地方,并将其更改为css
你有没有发现这个问题?我自己也遇到了同样的问题,我找到的所有解决方案到目前为止都不起作用:/。@GarrettWills:(仍然不走运。如果我解决了这个问题,我会在这里发布解决方案。现在我正忙于其他任务。事实上,我昨天终于解决了我的问题,但我不相信它和你的问题是一样的。我会发布一个我的问题的链接,看看它是否能帮助你。@GarrettWills肯定。。请分享。。也许我也能得到解决我问题的线索。检查如果有帮助,我可以将我的网页配置作为答案发布:)。url-loader
而不是file-loader
是我的错误。谢谢!
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
}