从自定义脚本动态加载时不显示字体真棒图标

问题描述：

我写了一个自定义脚本来包含我经常请求的各种文件。这类文件的例子有：从自定义脚本动态加载时不显示字体真棒图标

bootstrap.css
bootstrap.js
的jquery.js
jqueryui.js
字体awesome.css

我的自定义脚本被命名为remote.php。我包括我的随机CSS和JS文件到我的网页是这样的：

<!-- bootstrap css --> 
<link rel="stylesheet" href="remote.php?type=bscss" type="text/css"> 
<!-- font awesome css --> 
<link rel="stylesheet" href="remote.php?type=facss" type="text/css"> 
<!-- bootstrap js --> 
<link href="remote.php?type=bsjs" type="application/javascript"> 
<!-- jquery js --> 
<link href="remote.php?type=jqueryjs" type="application/javascript">

现在，我的全部，包括从各自的网站已经被下载，上传到我的服务器，并安装/配置文件（如果需要）根据家庭网站提供的说明。

我的脚本按我期望的那样工作，只有一个接口.....字体超棒的图标向我们展示了块而不是图标。其他一切都很好....

我已经确保根据我打电话的脚本在我的remote.php文件中设置标题。

的.css头设置为文本/ CSS设置为
的.js头应用程序/ JavaScript的

字体真棒CSS文件src属性已经更新到我的网站的完整URL，但依然没有。

如果我直接调用font-awesome.css文件（这是在我的服务器上），并且如果必须这样做才能使图标正常工作，那么图标就可以工作。然而，有一个脚本包含我所需要的所有文件会使生活变得更简单，因此我真的很想弄明白这一点。

答

您也必须下载字体。可能你有相对路径来字体真棒字体。

字体出现在下载包中。另外，当我直接调用我的服务器上的font-awesome.css文件时，这些图标可以正常工作。再次，它们在直接链接到.css文件时工作，在动态调用时不起作用。 –

如果你有在线，你可以给我链接吗？ – ban17

如果你检查网络资源，你有404吗？我很确定这有问题的路径。如果你使用remote.php来加载远程文件的内容然后打印它，它会搜索你的服务器上的文件，而不是远程获得你的css文件。 – ban17

答

我能解决我的问题，这竟然是一个CORS的问题，而不是返回404，它返回一个403

的解决方案是编辑我的.htaccess文件，分布在我的服务器的根。以下代码解决了我的问题。

# ---------------------------------------------------------------------- 
# Webfont access 
# ---------------------------------------------------------------------- 
# Allow access from all domains for webfonts. 
# Alternatively you could only whitelist your 
# subdomains like "subdomain.example.com". 
<IfModule mod_headers.c> 
    <FilesMatch "\.(ttf|ttc|otf|eot|woff?|woff2?|font.css|css)$"> 
     Header set Access-Control-Allow-Origin "http://SUBDOMAIN.DOMAIN.org" 
    </FilesMatch> 
</IfModule>

从自定义脚本动态加载时不显示字体真棒图标

相关推荐