为什么我的 Font Awesome CSS 文件会损坏（与 Joomla 一起使用时）？答案

【问题标题】：Why are my Font Awesome CSS files getting corrupted (when used with Joomla)?为什么我的 Font Awesome CSS 文件会损坏（与 Joomla 一起使用时）？
【发布时间】：2013-09-03 22:51:50
【问题描述】：

我正在 Joomla 3.1.5 中创建一个自定义模板，我正在将静态网页作为模型进行处理。静态页面显示正常。该页面有很多小图标/字形样式显示，包括 facebook、twitter、google+ 等的图标。我正在使用 font-awesome 来创建图标。在我的静态 html 示例中，font-awesome 工具效果很好。

当我在 Joomla 中创建自定义响应式模板时，CSS 文件会以某种方式“损坏”。

原始 CSS 文件提取..

.icon-twitter:before              { content: "\f099"; }
.icon-facebook:before             { content: "\f09a"; }
.icon-github:before               { content: "\f09b"; }

当我在 Firefox 浏览器中使用 firebug 检查页面时，我可以准确地看到该内容。当我在我的 joomla 页面中查看相同的内容时，CSS 文件显示如下：

.icon-twitter:before              {content: "";    }
.icon-facebook:before             {content: "";    }
.icon-github:before               {content: "";    }

静态网站和 Joomla 网站都是从同一个在线地点托管的。内容字符以某种方式被转换了......并且图标不显示。错误在 chrome 上看起来也一样。

CSS 文件的静态 html 站点和 joomla 站点副本都是相同的，尽管一个使用样式目录，另一个使用 css 目录。静态站点调用是：

<link rel="stylesheet" href="style/font-awesome.css">.

注意 joomla 对 CSS 文件的调用是：

$doc->addStyleSheet('templates/'.$this->template.'/css/font-awesome.css');

我确实看到了 font-awesome.css 的内容交付网络 (CDN) 链接

 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

我还没有尝试过，接下来会尝试使用它。同时，有人知道为什么信息在 Joomla 模板实现中被破坏了吗？非常感谢您的帮助，zip。

编辑：一个可能的想法..这可能是用于保存 .css 文件的文本编码格式的问题吗？ ASCII vs UTF-8 without BOM vs 直接 UTF-8 ？我认为我没有更改文件的任何一个副本，但它肯定是可能的。这可能是问题吗？使用的正确格式是什么？

编辑#2：这是来自网页的信息：静态页面编码：

 <!DOCTYPE html>
 <html lang="en">
 <head>...

Joomla 模板编码：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="
 <?php echo $this->language; ?>
 " lang="<?php echo $this->language; ?>
 " dir="<?php echo $this->direction; ?>">
 <head>...

【问题讨论】：

标签： css twitter-bootstrap joomla font-awesome

【解决方案1】：

更新。显然我有冲突的 .css 文件。我已将我的静态网页 CSS 文件添加到我的 Joomla '现有' template.css 文件目录中。我的模板基于 Joomla Protostar 模板。我想我会先弄清楚逻辑、模块和结构，然后再回去清理样式表。肯定有一些冲突，不确定到底是什么。 Protostar template.css 文件有 9000 多行代码。我现在已经删除了旧的 template.css 文件，所有的字体很棒的图标现在都可以正确显示了。

--压缩

【讨论】：