时间戳

首页 > 解决方案 > 样式表未从 URL 加载（GitHub 原始）

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

问题描述

你好吗？

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

我的机器上有以下树：

projectFolder
  |__ website
        |__index.html

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

当我尝试在 中使用它时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"as的文件href。

长话短说，当使用文件的原始链接导入托管在 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 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>

在此先感谢，
费尔南多

标签： htmlcssgitbootstrap-4glyphicons

解决方案

从这篇文章中获得帮助- 和gitcdn你可以创建一个链接，你可以在你的 HTML 中引用它......我删除了你加载 glyphicons 的 css 代码，现在所有 glyphicons 都从你的 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>

推荐阅读