So, I am having a problem with Font Awesome in IE8 when using HTTPS on my own site, and it even reproduces on Font Awesome's own site. If I go to the Awesome Font over HTTPS in IE8, I get boxes for all the icons, however, if I go to the Awesome Font over HTTP, I get the correct icons.
What is the problem? I heard that this may be due to the relative font paths in the Awesome over HTTPS font, but am not sure about that.
Here is a screenshot for those who like things like this:

Update
So, here is the code that refers to fonts and loads CSS. I am going to use the code from the Font Awesome website, as this seems to be a problem with Font Awesome, and not necessarily something with my website:
HTML, CSS :
<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;
}