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

问题描述 投票：0回答：1

你好吗？

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

我的机器上有以下tree：

projectFolder
  |__ website
        |__index.html

对于该网站，我正在使用Bootstrap 4，但是我需要使用Bootstrap 3中的glyphicons，因此我将Bootstrap 3中的glyphicons部分保存在一个名为.css的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中使用的代码。随意运行该代码片段，并更好地理解我的意思。

@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个回答
1
投票

this post的帮助-和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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.