Question

我在Github页面上托管了一个网站，并且没有显示材料图标。问题是，当我从浏览器启动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 加载字体，这不被认为是安全的并被浏览器阻止。

材料图标没有显示在托管的网页上

1 个答案: