我在自己的网站上使用HTTPS时,在IE8中使用Font Awesome时出现了问题,甚至在Font Awesome的官网上也能够重现。如果我在IE8中访问Font Awesome over HTTPS ,所有图标都会显示为方框,但是如果我访问 Font Awesome over HTTP,图标就可以正确地显示。
这里出现了什么问题?我听说这可能与Font Awesome over HTTPS中的相对字体路径有关,但不确定。
以下是喜欢这类事情的人的截图:
更新
下面是引用字体并加载CSS的代码。由于这似乎是Font Awesome的问题,而不是我的网站问题,因此我将使用Font Awesome网站上的代码:
引用CSS和图标的HTML代码:
<link rel="stylesheet" href="../assets/css/site.css">
<link rel="stylesheet" href="../assets/css/pygments.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
...
<div class="fa-hover col-md-3 col-sm-4">
<a href="../icon/adjust"><i class="fa fa-adjust"></i> fa-adjust</a>
</div>
在 font-awesome.css
中:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}