CODEWITHSUNDEEP
htmlcssmaterialize
user5455540
user5455540

Reputation:

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-->

Upvotes: 2

Views: 617

Answers (1)

Martin Gottweis
Martin Gottweis

Reputation: 2739

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.

Upvotes: 1

Related Questions