twitter bootstrap - ASP.NET MVC not loading FontAwesome correctly (blurry) -
i might have missed here, sense i've done every thing possible according fontawesome's instructions, cannot beautiful smooth font working. font less smooth , don't think it's set fontawesome.
here's image showing problem in firefox. it's same in ie9.
i using asp.net mvc 4 , bootstrap (less) , fontawesome (less) bundletransformer. here's bundleconfig class:
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; } } i have edited bootstrap.less file include @import "font-awesome.less"; instead of @import "sprites.less";, , have corrected path fontawesome font directory in font-awesome.less (@fontawesomepath: "../font";).
the generated source code of page:
<!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> i have verified font path in generated css points right fontawesome font files , there. firefox confirms when loading page:
[12:24:45.372] http://localhost:57700/ [http/1.1 200 ok 1040ms] [12:24:46.457] http://localhost:57700/bundles/css?v=pzv9cbtbs7_dcipcfh8cccooepy8eim_ikgyy6a02mw1 [http/1.1 200 ok 7ms] [12:24:46.458] http://localhost:57700/bundles/modernizr?v=n72c_kkpfdvtseiz3ctjgon7edh9wa28ll9ncn1mtuw1 [http/1.1 200 ok 5ms] [12:24:46.459] http://localhost:57700/bundles/js?v=7pbtqq6bubxyt95hbnk4xn3qb852tl2pcmqots6puls1 [http/1.1 200 ok 12ms] [12:24:47.695] http://localhost:57700/content/font/fontawesome-webfont.woff?v=3.0.1 [http/1.1 200 ok 2ms] i tried setting font-family of link fontawesome, font totally off.
what missing here?
fontawesome icons , not text. in example, cart beingness generated fontawesome font looks fine me.
the 'checkout' text generated body, btn , btn-success classes. on site fontawesome has customized these base of operations bootstrap classes modifying bootstrap classes.
i'd recommend leaving base of operations bootstrap css file intact , creating own css stylesheet , referencing below core bootstrap.css stylesheet should override bootstrap styles. think need body, btn , btn-success classes, should need add together in custom style sheet :
update :
note proxima-nova font served via typekit webfonts service (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 twitter-bootstrap less font-awesome
No comments:
Post a Comment