ここで何かを見逃したかもしれませんが、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()のFontAwesomeフォントディレクトリへのパスを修正しました@FontAwesomePath: "../font";
。
私のページの生成されたソースコード:
<!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]
リンクのfont-familyをFontAwesomeに設定しようとしましたが、フォントが完全にオフになっています。
ここで何が欠けていますか?