Material 托管网页上未显示图标

Question

我在 Github 个页面上托管了一个网站，material 图标没有显示。问题是当我从浏览器启动 index.html 页面（而不是转到托管页面）时它们会显示。

这是这部分的 html：

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

将 http 替换为 https 即可：

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

如果你打开你的开发者工具（右击任何地方然后点击 inspect，然后转到控制台），它会告诉你哪里出了问题。在这种情况下，您通过 https 访问 github 页面，但尝试使用 http 加载字体，这被认为是不安全的，并且被浏览器屏蔽了。

Material 托管网页上未显示图标

Material icons not showing on a hosted webpages

html

css

materialize