Question

我可能在这里错过了一些东西，但我觉得我已经按照FontAwesome的说明做了所有可能的事情，但我根本无法让那个漂亮的光滑字体工作。我的字体不太流畅，我甚至认为它没有设置为FontAwesome。

这是一张显示我在Firefox中的问题的图片。它在IE9中是一样的。 FontAwesome problem

我在BundleTransformer中使用ASP.NET MVC 4和Bootstrap（less）以及FontAwesome（less）。这是我的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]

我尝试将链接的font-family设置为FontAwesome，但字体完全关闭。

我在这里缺少什么？

Answer 1

Fontawesome仅用于图标，而不用于文本。所以在你的例子中，只有FontAwesome字体生成的购物车对我来说很好。

'Checkout'文本由body，btn和btn-success类生成。在他们的网站上，FontAwesome通过修改bootstrap类从基本Bootstrap类中定制了这些。

我建议保留基本引导程序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);
    }

ASP.NET MVC没有正确加载FontAwesome（模糊）

1 个答案: