样式表未从 URL（GitHub 原始）加载

Question

你好吗？

首先，感谢您的帮助，我知道这个问题很愚蠢，但我找不到答案，也不明白为什么它没有按预期工作。

我的机器上有以下树：

projectFolder
  |__ website
        |__index.html

对于这个网站，我使用的是 Bootstrap 4，但我需要使用 Bootstrap 3 中的 glyphicons，所以我保存了 glyphicons 部分来自 Bootstrap 3，位于名为 glyphicons.css 的 .css 文件中。然后我将此文件上传到 GitHub，原始版本可用 here.

当我尝试在 index.html 中使用它时，使用以下行导入它，但没有用。

<link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css">

然而，当我下载文件并将其添加到projectFolder时，得到以下路径，它工作正常，所以问题不在.css文件中。

projectFolder/glyphicons.css

要导入文件，我使用与上面相同的 <link>，但 "../glyphicons.css" 与 href 相同。

长话短说，当使用文件的 raw link 导入托管在 GitHub 上的样式表时，它不会工作。

我是不是做错了什么？

下面您可以看到 glyphicon.css 文件的相关部分以及我在 index.html 中使用的代码。请随意运行片段并更好地理解我的意思。

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-picture:before {
    content: "\e060";
}

<!DOCTYPE html>
<html>

<head>

  <!-- Bootstrap4 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- Glyphicons File -->
  <!--<link rel="stylesheet" href="../glyphicons.css" type="text/css"> WORKS (COMMENTED TO USE WITH Whosebug SNIPPET)-->
  <!-- <link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css"> DOESN'T WORK-->


  <title>Glyphicons Test</title>
</head>

<body>

  <style type="text/css">
    div {
      font-size: 100px;
      margin: 100px auto;
    }
    
    #text {
      font-size: 20px;
      display: block;
    }
  </style>


  <div class="container bg-dark text-center text-white">
    <span class="glyphicon glyphicon-picture"></span>
    <span id="text">Icon is above if working</span>
  </div>

</body>

</html>

提前致谢，
费尔南多

Answer 1

在 this post - and gitcdn 的帮助下，您可以创建一个 link，您可以在 HTML 中引用它...我删除了您加载的 css 代码字形和现在所有字形都从您的 git link;

加载

div {
  font-size: 100px;
  margin: 100px auto;
}

#text {
  font-size: 20px;
  display: block;
}

<!DOCTYPE html>
<html>

<head>

  <!-- Bootstrap4 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <link rel="stylesheet" href="https://gitcdn.link/repo/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" />

  <title>Glyphicons Test</title>
</head>

<body>

  <div class="container bg-dark text-center text-white">
    <span class="glyphicon glyphicon-picture"></span>
    <span id="text">Icon is above if working</span>
  </div>

</body>

</html>

样式表未从 URL（GitHub 原始）加载

Stylesheet not loading from a URL (GitHub raw)

html

css

git

glyphicons

bootstrap-4