【发布时间】：2021-12-20 20:36:39
【问题描述】：
我可能在这里遗漏了一些东西，但我觉得我已经按照 FontAwesome 的说明做了所有可能的事情，但我根本无法让那种漂亮流畅的字体正常工作。我的字体不太流畅，我什至不认为它设置为 FontAwesome。
这是一张显示我在 Firefox 中的问题的图片。在 IE9 中也是如此。
我正在使用 ASP.NET MVC 4 和 Bootstrap（更少）和 FontAwesome（更少）和 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，但字体完全关闭。
我在这里错过了什么？
【问题讨论】：
标签： asp.net-mvc twitter-bootstrap less font-awesome