2

ここで何かを見逃したかもしれませんが、FontAwesomeの指示に従って可能な限りすべてのことを行ったように感じますが、その美しい滑らかなフォントを機能させることはできません。私のフォントは滑らかではなく、FontAwesomeに設定されているとは思いません。

これがFirefoxでの私の問題を示す写真です。IE9でも同じです。 FontAwesomeの問題

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に設定しようとしましたが、フォントが完全にオフになっています。

ここで何が欠けていますか?

4

1 に答える 1

2

Fontawesomeはアイコン専用であり、テキスト用ではありません。したがって、あなたの例では、カートだけがFontAwesomeフォントによって生成されています。

'Checkout'テキストは、body、btn、およびbtn-successクラスから生成されます。彼らのサイトでは、FontAwesomeは、ブートストラップクラスを変更することにより、基本のブートストラップクラスからこれらをカスタマイズしています。

ベースのブートストラップcssファイルをそのままにして、独自のcssスタイルシートを作成し、ブートストラップスタイルをオーバーライドするコアbootstrap.cssスタイルシートの下で参照することをお勧めします。body、btn、およびbtn-successクラスのみが必要だと思うので、カスタムスタイルシートに追加する必要があるのは次のとおりです。

アップデート :

proxima-novaフォントは、Typekit webfontsサービス(https://typekit.com/fonts/proxima-nova)を介して提供されることに注意してください。

  body {
    font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    }
        .btn-success {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        background-color: #5bb75b;
        background-image: -moz-linear-gradient(top,#62c462,#51a351);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
        background-image: -webkit-linear-gradient(top,#62c462,#51a351);
        background-image: -o-linear-gradient(top,#62c462,#51a351);
        background-image: linear-gradient(to bottom,#62c462,#51a351);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);
        border-color: #51a351 #51a351 #387038;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }
    .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbb;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    }
于 2013-02-18T08:18:41.813 に答える