Stylesheet not loading from a URL (GitHub raw)

How are you doing?

First, thank you for trying to help, I know this question is silly but I couldn't find an answer nor understand why it is not working as expected.

I have the following tree on my machine:

projectFolder
  |__ website
        |__index.html

For this website, I'm using Bootstrap 4, but I needed to use glyphicons from Bootstrap 3, so I saved the glyphicons part from Bootstrap 3 in a .css file called glyphicons.css. I then uploaded this file to GitHub, which raw version is available here.

When I tried using it in index.html, using the following line to import it, it didn't work.

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

Nevertheless, when I download the file and added it to projectFolder, resulting in the following path, it worked fine, so the problem is not in the .css file.

projectFolder/glyphicons.css

To import the file I was using the same <link> as above but with "../glyphicons.css" as href.

Long story short, when importing a stylesheet hosted on GitHub using the raw link of the file, it does not work.

Am I doing something wrong?

Below you can see the relevant part of the glyphicon.css file and the code that I'm using in index.html. Feel free to run the snippet and understand better what I mean.

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

Thanks in advance,
Fernando

Solution

Taking help from this post - and gitcdn you can create a link which you can refer to in your HTML... i removed the css code where you had loaded the glyphicons and now all glyphicons are loaded from your 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>