【问题标题】:Font Awesome not working (blank squares)字体真棒不起作用(空白方块)
【发布时间】:2016-08-13 20:02:01
【问题描述】:

我正在为我的婚礼建立一个网站,并在 x10hosting 中使用 .tk 域托管它。 问题是.. 当我使用 x10host.com 访问它时,我能够看到用于移动设备的 fontawesome 图标(菜单/转到顶部)。 当我使用 .tk 扩展名访问它时,图标是一个空白方块。

我在这里搜索了同样的问题,并尝试了一堆解决方案,但没有一个对我有用。

我尝试过的:

.htacess 中的这段代码

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

.style.css 中的这个

@import url("http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/font-awesome.css");

标题中的这个

<link rel="stylesheet" href="http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/font-awesome.css" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

将 fontawesome.css 中的所有 url 更改为完整地址:

@font-face {
  font-family: 'FontAwesome';
  src: url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.eot');
  src:  /*url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular') format('svg'),*/
  url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
  url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), 
  url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.woff2') format('woff2'), 
  url('http://karinaandclinton.x10host.com/wp-content/themes/optimizer/assets/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

有人有额外的建议吗? 网站是http://www.karinaandclinton.tk/,主机是http://karinaandclinton.x10host.com

我使用的主题是优化器。

谢谢!

【问题讨论】:

  • 不是 100% 确定它为什么不起作用。但是添加 cdn 版本&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" rel="stylesheet"&gt; 似乎可以正常工作。
  • 祝你们俩永远幸福。祝贺你的婚礼!

标签: css fonts dns hosting


【解决方案1】:

  • (eot|font.css|otf|ttc|ttf|woff) 应该是 (eot|css|otf|ttc|ttf|woff)

【讨论】:

  • 不敢相信我没有尝试过!非常感谢!
  • 我的荣幸,@karips ...如果此解决方案对您有用,请不要将其标记为已解决。很多很多祝贺你的婚姻:)