How are you feeling today?
I appreciate your willingness to assist, although I realize this may seem like a trivial question. I am struggling to comprehend why things are not functioning as expected.
Within my local directory, I have the following tree structure:
projectFolder
|__ website
|__index.html
While working on this website, I needed to utilize Glyphicons from Bootstrap 3 in conjunction with Bootstrap 4. To achieve this, I extracted the Glyphicons section from Bootstrap 3 and saved it in a file named glyphicons.css. Subsequently, I uploaded this file to GitHub, where the raw version is accessible here.
Initially, when I attempted to import it in index.html using the following line, it did not yield the desired outcome.
<link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css">
However, upon downloading the file and placing it in the root projectFolder, with the path as shown below, it worked perfectly. Hence, the issue does not lie within the .css file.
projectFolder/glyphicons.css
Despite my efforts to import the file by utilizing the same <link> as above but with "../glyphicons.css" as the href, the problem persisted.
To summarize, when attempting to import a stylesheet hosted on GitHub using the raw link of the file, it fails to work.
Could you please advise if I am overlooking something?
Below, you can review the relevant section of the glyphicon.css file, along with the code utilized in index.html. Feel free to execute the snippet to gain a better understanding of my situation.
@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>Many thanks in advance,
Fernando