So I'm coding on VS Code. I have Sass installed and I'm coding with it. When I view it in localhost, it looks how I want it to be. Then I upload it to GitHub and for some reason it is not working on GH Pages. Here is the link: GitHub Dark Mode
I was trying to make a Dark Mode that I could add on my site. Here is the original tut CodePen that I followed: The CodePen. Do I have to convert it all to CSS?
Can you all please help?
Best,
NotDiamondZ
You need to compile the Sass file and call it on your html with .css extension instead of .scss
eg.
<link rel="stylesheet" type="text/css" href="styles.css">
Perhaps you can check out this CSS cannot be loaded from file: URLs unless they end in a .css file extension
Related
I'm trying to host my page on Github Pages but it is not recognizing my CSS file. I've tried changing the names, rearranging the folders and it still doesn't work. Does anyone know what can I do?
Here is my GitHub project.
I tried change the folder names, and putting the CSS file in the main folder.
Your index.html file is on the same level as your css folder. You'll need to remove ./ from ./css/style.css and you should be fine.
EDIT: I just checked it out and it looks like the CSS is loading.
Your github page
If you change your CSS link from
<link rel="stylesheet" href="./css/style.css">
to
<link rel="stylesheet" href="css/style.css">
I think your css wil work, happy coding!
I was working on a preview card component and when I uploaded my code to a repo to deploy it, github doesn't seem to load my css file style.
note: not my first time to deploy on github pages.
thanks in advance!
repo link: https://github.com/HanyAyad/Stats-preview-card-component-
live-website link on github pages: https://hanyayad.github.io/Stats-preview-card-component-/
same website deployed on netlify (working fine): https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/
Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?
I just tested here and when importing your CSS file, you are using
<link rel="stylesheet" href="css/style.css">
when you should be using
<link rel="stylesheet" href="CSS/style.css" >
URLs may be case-sensitive, it depends on what file system you are running your website.
Try renaming the folder CSS to css.
The directory in your repo is named CSS and not css as expected. So, please rename the directory.
It only works on Netlify because it doesn't take casing into account, for some reason. (That is, https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/CsS/sTyLe.css works fine.)
When I provide cnd link:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Then its showing icons and working fine.
Here is code jsfiddle
When I copy and host the same css file locally then its not working
Here is example jsfiddle code
Why its not working when I host locally? Is there any restrictions or license problem?
Thanks
I guess you are using a CDN network instead of Font Awesome's kit code. If that's the case, I'd recommend you using the Kit code of your kit. That'll help you in showing icon on your site, locally or hosted doesn't matter.
The fix I found is to save this css file locally and edit it. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Find url and replace ../ to ../../ because my web font folder location was assets/webfonts not root
I read different questions on stackoverflow regarding this issue but i haven't got any solution for my case, the rest of my pages are displaying css well, but index.html doesn't display.
But surprisingly when i run my project locally it works very well.
What am i missing?
My github pages link :
https://huxaiphaer.github.io/-Ride-My-Way/index.html
My github project link , in the branch gh-pages:
https://github.com/huxaiphaer/-Ride-My-Way/tree/gh-pages
Your href was wrong for your css import. You were navigating up more folder.
<link rel="stylesheet" type="text/css" media="screen" href="UI/css/index.css">
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0.
But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file.
Here my code:
<html>
<head>
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-user-circle-o"></i>
</body>
</html>
Does anyone know what is the issue?
There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.
There are two ways to go about this problem:
font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You have to host the font files too. Go to the fontawesome website and read the related documentation.
Font awesome get started
As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.
As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.
Copy the entire font-awesome directory into your project.
In the of your html, reference the location to your font-awesome.min.css.