Fatal编程技术网
  • jquery/
  • Jquery 字体很棒的图标来作为框

Jquery 字体很棒的图标来作为框

jquery twitter-bootstrap jquery-mobile

Jquery 字体很棒的图标来作为框,jquery,twitter-bootstrap,jquery-mobile,font-awesome,Jquery,Twitter Bootstrap,Jquery Mobile,Font Awesome,我正在尝试用Twitter引导和Jquery，Jquery Mobile实现字体真棒。但是我得到的只是方形的盒子来代替那些图标。是否存在兼容性问题。下面是html代码。请提供相关帮助。谢谢 <html> <head> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/style.css">

我正在尝试用Twitter引导和Jquery，Jquery Mobile实现字体真棒。但是我得到的只是方形的盒子来代替那些图标。是否存在兼容性问题。下面是html代码。请提供相关帮助。谢谢

 <html>
    <head>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">   
    <!--     <link rel="stylesheet" href="http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome">-->
    </head>
    <body>
    <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
    <div class="container fullContainer" >
    <div class="row port-container">
    <div class="col-xs-12">
    <nav class="navbar" style="opacity: 1; top: 0px; ">
    <ul class="list-unstyled">
    <li class="menu-li bg-green box2x2 pull-left"><a href="#" id="resumelink"><span>About Us</span><i class="i-centered icon-attach-1"></i></a></li>
     <li class="menu-li bg-orange box2x2 pull-right"><a href="#" id="worklink"><span>Search</span><i class="i-centered icon-art-gallery"></i></a></li>
      <li class="menu-li bg-purple box2x2 pull-left"><a href="#" id="resumelink"><span>Whats New</span><i class="i-centered icon-attach-1"></i></a></li>
      <li class="menu-li bg-white box2x2 pull-right"><a href="#" id="worklink"><span>Brouchers</span><i class="i-centered icon-art-gallery"></i></a></li>
      <li class="menu-li bg-red box2x2 pull-left"><a href="#" id="lifelink"><span>Favourites</span><i class="i-centered icon-pitch"></i></a></li>
      <li class="menu-li bg-blue box2x2 pull-right"><a href="#" id="contactlink"><span>Contact Us</span><i class="i-centered icon-email"></i></a></li>
    </ul>
    </nav>
      </div>
    </div>
    </div>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery.mobile-1.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    </body>
    </html>


复古照相机


    

  • 

  • 

  • 

  • 

  • 

  •
大多数现代浏览器都支持它。 可能发生的情况是，您的字体文件不是 上膛了。 检查网络/控制选项卡，查看字体文件是否没有给出404错误

以下是字体路径：

 font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=4.0.3');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
当另一种字体覆盖图标字体时，会发生这种情况。搜索您的CSS以查看是否还有另一个
字体系列：OtherFont！重要的

否则，请明确指定
i.fa
标记（Font awesome使用这些标记创建字体）以


对我来说很好。
是的。字体图标存在兼容性问题。并非所有浏览器都支持它。你必须小心使用字体很棒的图标字体。我使用的是谷歌Chrome 18版。我试着本地化这些库，下载了整个软件包，并使用了其中的css文件。你能告诉我html文件中应该包含哪些文件才能正常工作吗？这些文件在软件包中是可用的。软件包中的字体文件夹必须与css文件夹并排放置（如果是fontawesome.css所在的文件夹），或者你必须更改css文件中的路径。要获得支持，唯一要包含的文件是css文件。@meistermeier谢谢，它现在工作得很好。欢迎使用字体真棒的任何其他提示或技巧。这方面我是新手。

i.fa{ 
    font-family:FontAwesome!important; 
}