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

【问题标题】：Stylesheet not loading from a URL (GitHub raw)样式表未从 URL 加载（GitHub 原始）
【发布时间】：2020-03-31 00:33:19
【问题描述】：

你好吗？

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

我的机器上有以下树：

projectFolder
  |__ website
        |__index.html

对于这个网站，我使用的是 Bootstrap 4，但我需要使用 Bootstrap 3 中的 glyphicons，因此我将 Bootstrap 3 中的 glyphicons 部分保存在 @ 987654323@ 文件名为 glyphicons.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 链接导入托管在 GitHub 上的样式表时，它不起作用。

我是不是做错了什么？

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

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

提前致谢，
费尔南多

【问题讨论】：

标签： html css git bootstrap-4 glyphicons

【解决方案1】：

在this post 和gitcdn 的帮助下，您可以创建一个可以在 HTML 中引用的链接...我删除了您加载字形图标的 CSS 代码，现在所有字形图标都从您的 git 加载链接；

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>

【讨论】：