Question

我使用此代码创建图标

.iconhouse{
  content:url('images/ico/home.png');
  float:left;
  display: block;
  width: 15px;
  height: 15px;
  padding-right:10px;
  padding-top:1px;
  color:#fff;
}

并使用此图标

<a href="#" class=""><span class="iconhouse"></span>Sample text</a>

Safari和Chrome工作正常，我得到了我的图标，但Firefox似乎错过了它。问题在哪里？

Answer 1

试试这个

@-moz-document url-prefix() {
.iconhouse {
   content:url('images/ico/home.png');
   float:left;
   display: block;
   width: 15px;
   height: 15px;
   padding-right:10px;
   padding-top:1px;
   color:#fff;
}
}

这应该只针对Firefox。让我们知道你是如何进行的：）

Answer 2

如果您只使用图像的锚标记（没有文字的锚/只有图像），请尝试给锚标签一个宽度和高度

.divclass a.iconhouse {
    content:url('images/ico/home.png');
    float:left;
    display: block;
    width: 15px;
    height: 15px;
    padding-right:10px;
    padding-top:1px;
    color:#fff;
}

Answer 3

这对我有所帮助。将此代码段添加到我的.htaccess文件

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

当我将网站从我的开发服务器转移到新服务器，或者从不同的IP地址/ URL提供图标时，我发现情况尤其如此。

Firefox上不可见的图标

3 个答案: