FontAwesome图标不显示。 为什么?

最近我一直在开发这个网站,我试图把一个字体真棒图标,所以它是可扩展的。

事情是他们没有出现。

看看HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a> 

要么

 <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li> 

我没有把样式表引用放在头上。

我不知道他们为什么没有出现。

这里是参考:

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

好的,这里是完整的html:

 <head> <meta charset="UTF-8"> <title>Retrica</title> <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="style/normalize.css" rel="stylesheet" type="text/css"> <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css"> </head> <body> <header class="top-header"> <div class="container"><!-- Start Container --> <div class="row"><!-- Start Row --> <div class="span3"><!-- Start Span3 --> <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div> </div><!-- End Span3 --> <div class="span9"><!-- Start Span9 --> <nav class="main-nav"> <!-- Start Nav --> <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a> <ul class="nav-ul"> <!-- Start Unordered List --> <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li> <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li> </ul> <!-- End Unordered List --> </nav><!-- End Nav --> </div><!-- End Span9 --> </div><!-- End Row --> </div><!-- End Container --> </header> <section> <h1>The greatest way to contact those you love</h1> <h3>In a way you don't imagine</h3> <a href="#" class="btncta">Register Now</a> </section> </body> 

根据你的参考,你有这样的:

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

具体来说, href= part。

但是,你的完整的HTML是这样的:

 <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

你有没有尝试在你的完整htmlreplacesrc= href=成为这个?

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

适用于我: http : //codepen.io/TheNathanG/pen/xbyFg

对于缺less字体的寻求者,我收集了一些想法:

  • 确保你使用正确的链接到CDN,例如:

     <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'> 
  • 如果您的页面使用HTTPS,您是否使用HTTPS链接到字体超棒的CSS(在上面的链接中用https://replacehttp:// )。

  • 仔细检查您没有启用AdBlock Plus或uBlock。 他们可能会阻止一些图标。

  • 重置您的浏览器caching。 (在Chrome上执行Looong单击重新加载button并select硬caching重置)

  • 确保使用的<span><i>元素使用FontAwesome字体系列。 例如,它不能只是

     <i class="fa-pencil" title="Edit"></i> 

     <i class="fa fa-pencil" title="Edit"></i> 

    如果您在CSS中具有以下内容,则无法工作:

     * { font-family: 'Josefin Sans', sans-serif !important; } 
  • 如果您使用的是IE8,您使用的是HTML5 Shim吗?

  • 如果这不起作用,那么在Font Awesome Wiki上还有进一步的疑难解答 。

您必须使用https for maxcdn.bootstrapcdn.com。 只有https上的maxcdn支持CORS

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" /> 

试试将下面的两个链接保存在标题标签中。

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

从下面的链接获取图标:

 <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css"> 

join这对我工作:

 <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"> 

看一看

那么完整的例子是:

 <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"> <a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a> 

如果您正在使用博主托pipe,请使用此URL样式表css:

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 

确保在链接到awesomefont css文件中包含rel和type,如“rel =”样式表“type ='text / css'”。 没有这些文件没有正确加载我。

你可以添加这个.htaccess文件在真棒字体的目录

 AddType font/ttf .ttf AddType font/eot .eot AddType font/woff .woff AddType font/woff .woff2 AddType font/otf .svg <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 

我有同样的问题,我解决了把字体目录在与Css相同的水平

我用:

 <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a> 

和风格之后:

 .icon::before { display: inline-block; margin-right: .5em; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } 

你需要一个字体导入器 尝试

 <style> @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);); </style> 

改变这个:

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

对此:

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

我相信你需要http:否则它不知道使用什么协议(并使用错误的file:例如,结果)。