Olivier Grech Olivier Grech - 24 days ago 9
CSS Question

Material icons not showing on a hosted webpages

I hosted a site on Github pages, and the material icons are not showing. The issue is that they are showing when I launch the index.html page from my browser (instead of going to the hosted page).

What I get from the page on my computer

What I get from the hosted page

Here's the html for this part:

<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>


<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content blue-text text-darken-2">
<span class="card-title">Olivier Grech</span>
<p>Text</p>
<div><i class="material-icons">phone</i><em>Phone</em></div>
<div><a href="mailto:mail"><i class="material-icons">email</i></a><em>mail</em></div>
</div>
</div>
</div>

<!--Rest of the page-->

Answer

Replace http with https and it will work:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If you open your developer tools(right click anywhere and click inspect, then go to the console), it would tell you whats wrong. In this case you were accessing the github page over https but were trying to load the font using http which is not considered safe and was blocked by the browser.

Comments