The comparison between how a website displays on Chrome (top) versus Firefox (bottom) reveals an interesting issue with icon visibility. The icons appear in Firefox but not always in Chrome, except in some instances after refreshing the page multiple times.
Here is a snippet of the CSS and HTML code related to this problem:
/* Relevant CSS */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');} @font-face {
font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
.opensans { font-family: 'Open Sans', sans-serif; }
.oswald { font-family: 'Oswald', sans-serif; }
html { background:#ccc; }
body { color:#444;font-family:'Open Sans'; }
h1,h2,h3,h4,h5 { font-family:'Oswald'; }
body > div {position:relative;background:#f8f8f8;}
span[class^="icon-"] { font-size: 19px;float: left; }
#top { background:#f3f4f5;border-bottom:solid #333 5px;width:100%; }
#header { background: #414141 url(images/txture.png);color:#999; }
#header span[class^="icon-"] { margin-right:5px; }
#header li { }
#header a, #header .text { float:left;padding: 5px 13px;color:#999;transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; }
#header a:hover { color:#ccc;background:rgba(100,100,100,0.2); }
#header [class^="icon-"]::before { }
#header li:last-child a { float:right; }
HTML Markup:
<div id="top">
<ul id="header" class="clearfix">
<li style="float:left;border-right: solid 1px #000;">
<a href="#" style="border-right:solid 1px #333;">
<span aria-hidden="true" class="icon-home"></span>
<span>Home</span>
</a>
</li>
<li>
<span class="text">Tools:
</span>
<a href="#" style="padding:5px">
<span aria-hidden="true" class="icon-equalizer"></span>
</a>
<a href="#" style="padding:5px">
<span aria-hidden="true" class="icon-bars"></span>
</a>
<a href="#">
<span aria-hidden="true" class="icon-printer"></span>
</a>
</li>
<li>
<a href="#">
<span aria-hidden="true" class="icon-user"></span>
<span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d434c40486d48404c4441034e4240">[email protected]</a>
</a>
</li>
<li>
<a href="#">
<span aria-hidden="true" class="icon-key-stroke"></span>
<span>Log Out</span>
</a>
</li>
</ul>
</div>
Update
An examination of the console revealed a warning message associated with the icons' display issue:
Resource interpreted as Font but transferred with MIME type font/svg
Another Update
The problem persists regardless of using class names or the data-icon content value method for the icons.