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="font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
好的，这里是完整的html：
<head> <meta charset="UTF-8"> <title>Retrica</title> <link src="http: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="font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
具体来说， href= part。
但是，你的完整的HTML是这样的：
<link src="http:font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
你有没有尝试在你的完整htmlreplacesrc= href=成为这个？
<link href="http:font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
适用于我： http : //codepen.io/TheNathanG/pen/xbyFg
对于缺less字体的寻求者，我收集了一些想法：
-
确保你使用正确的链接到CDN，例如：
<link href="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="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
试试将下面的两个链接保存在标题标签中。
<link href="http: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='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(font-awesome/4.7.0/css/font-awesome.min.css);); </style>
改变这个：
<link href="font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
对此：
<link href="http:font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
我相信你需要http:否则它不知道使用什么协议（并使用错误的file:例如，结果）。
