иконки не видно на Firefox

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

Это это то, что помогло мне. Добавление этого фрагмента в мой .htaccessfile

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

Я считаю, что это особенно тот случай, когда я передаю сайты от моего Dev сервера на новый сервер, или где значки обслуживаются из другого IP-адреса/URL.