我可能在这里遗漏了一些东西,但我觉得我已经按照 FontAwesome 的说明做了所有可能的事情,但我根本无法让那种漂亮流畅的字体正常工作。我的字体不太流畅,我什至不认为它设置为 FontAwesome。
这是一张显示我在 Firefox 中的问题的图片。在 IE9 中也是如此。
我正在使用 ASP.NET MVC 4 和 Bootstrap (less) 和 FontAwesome (less) 和 BundleTransformer。这是我的 BundleConfig 类:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
var modernizrBundle = new Bundle("~/bundles/modernizr")
.Include("~/Scripts/modernizr-*");
modernizrBundle.Transforms.Add(jsTransformer);
modernizrBundle.Orderer = nullOrderer;
var jsBundle = new Bundle("~/bundles/js")
.Include("~/Scripts/jquery-{version}.min.js")
.Include("~/Scripts/bootstrap.js");
jsBundle.Transforms.Add(jsTransformer);
jsBundle.Orderer = nullOrderer;
var cssBundle = new Bundle("~/bundles/css")
.Include("~/Content/less/bootstrap.less")
.Include("~/Content/less/responsive.less");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(modernizrBundle);
bundles.Add(jsBundle);
bundles.Add(cssBundle);
BundleTable.EnableOptimizations = true;
}
}
我编辑了 bootstrap.less 文件以包含@import "font-awesome.less";
而不是@import "sprites.less";
,并且我更正了 font-awesome.less ( @FontAwesomePath: "../font";
) 中 FontAwesome 字体目录的路径。
我的页面生成的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1"></script>
</head>
<body>
<div>
<p>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a>
</p>
<script src="/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1"></script>
</div>
</body>
</html>
我已经验证生成的 css 中的字体路径指向正确的 FontAwesome 字体文件并且它们在那里。Firefox 在加载页面时会确认这一点:
[12:24:45.372] GET http://localhost:57700/ [HTTP/1.1 200 OK 1040ms]
[12:24:46.457] GET http://localhost:57700/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1 [HTTP/1.1 200 OK 7ms]
[12:24:46.458] GET http://localhost:57700/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1 [HTTP/1.1 200 OK 5ms]
[12:24:46.459] GET http://localhost:57700/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1 [HTTP/1.1 200 OK 12ms]
[12:24:47.695] GET http://localhost:57700/Content/font/fontawesome-webfont.woff?v=3.0.1 [HTTP/1.1 200 OK 2ms]
我尝试将链接的字体系列设置为 FontAwesome,但随后字体完全关闭。
我在这里想念什么?