Yesterday I was working on my college project, everything was running smooth so I decided to upload it to github where my partner could access it. Today I opened the local repo and suddenly my CSS wasn't displaying correctly. I'm using Bootstrap 4.
This is how it looks now:
This is how it should look:
I've been using a Bootstrap template. I already tried making a new CSS file but it doesn't change. Also using this post ASP.Net website - doesn't load css file correctly
How I was calling my css
<link rel="stylesheet" href="css/style.css">
I tried
<link rel="stylesheet" href="~/css/style.css">
Even
<head runat="server">
<link rel="stylesheet" href="~/css/style.css" runat="server">
</head>
Css folder is located in asp default folder
Well, after a little attempt, it looks like the project had been corrupted when it was loaded. Since I had finished it on time, I created a new project and include the previous files.
It works like a charm.
I am building Semantic UI with Gulp using this guide
However, the problem is now that the icons are not showing. So if I use
<i class="facebook icon"></i>, nothing shows up.
I guess I haven't built the icon font or something like that.
Is it necessary to load Font Awesome or something like that myself? I have read through the Semantic UI documentation, but I cannot find anywhere stating that I have to do anything to enable icons.
You need to include the font assets which are located in themes/default/assets/fonts/
The themes folder must be in the same directory as your semantic.css file.
The fonts are imported externally from the semantic.css file from within the themes directory.
To obtain this directory, download the zip for semantic ui and look inside the dist folder.
I was having the same issue, use this link tag in the head of your html and you're good to go :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Got this from their official website.
Since it's not marked as ansered yet in 2019... Here's the clear answer. The above answers are correct as well, just not straight forward.
So basically what you missed out is the inclusion of the icons themselves. When you download semantic-ui it comes with themes folder within the "dist" folder. what you must do is copy that themes folder and paste it in your project folder where your semantic-ui.css is located. and it will work.
Please remember to mark the question as answered.
I had an CORS-issue (causing square empty icons) with the Semantic UI Icons when loading the minified CSS from a CDN. Turns out that it was my location override that caused it, turning it off made the icons display properly.
I fixed the problem replacing this line
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
with this
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.7/dist/semantic.min.css">
I also had to add link to icon.min.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">
I wrote a post about it on medium :)
In my case I forgot to import the semantic ui css file. Import it in the App.js ( as it is the top level file ) or anywhere inside your project.
import 'semantic-ui-css/semantic.min.css'
I had the same problem and I solve it adding the following lines on my webpack.mix.js
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')
and then executing the command
npm run dev
This add in my case the missing files I need
In the semantic.css file, you'll find this line:
background: url("./themes/.....")
so, what you have to do is to copy the themes folder with all its contents beside your semantic.min.css
All simply copy the folder Semantic-UI-CSS-master with all its contents to your public/static/wwww folder, and will get things working smoothly.
I partially fixed this by downloading icon.min.css from this link and then replacing the CDN link with this two lines:
<link rel="stylesheet" href="~/Content/icon.min.css" />
<link rel="stylesheet" href="~/Content/semantic.min.css"/>
There are still some icons missing: all the outlined ones.
You could also try the fonts folder from this branch but it did not work for me.
So as the other answers have provided you can change the script to look like:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Stop the server and close your browser. If you do not fully close the browser the error will persist. Restart your server.
If this does not resolve your issue, you can also choose to install the CSS library locally via
npm install semantic-ui-css
Then, import the library into your root index.js component,
import "semantic-ui-css/semantic.min.css";
I was having the same problems using react
tried everything mentioned and nothing worked
then just replaced this link
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
hope that helps
Font Awesome worked fine when I had index.html at the root with a link to font-awesome.css
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
I changed the structure of my website for having multiple languages and I now have a folder called /en for all the pages in English and a folder called /de for all pages in German.
I hence have /en/index.html
When I write in the head of index.html following:
<link rel="stylesheet" href="../assets/plugins/font-awesome/css/font-awesome.css">
then I get small boxes with numbers, like f086 instead of the icon comments for example.
It means, the font-awesome.css file is found but the icons do not appear.
I tried to put the folder font-awesome in en/test/ and wrote in /en/index.html:
<link rel="stylesheet" href="test/font-awesome/css/font-awesome.css">
and it works again.
Are there some restrictions in the path of the css file font-awesome.css?
Is it possible to change them or are there other ways of solving that problem?
I've fixed the problem. I was doing something wrong with apache and php.
While displaying the pages on the browser, the icons did not appear,
and opening them via http://localhost/en/index.html solved the problem.
Sorry, my mistake.
I'm working on a web-application built upon the MEAN stack.
I use bootstrap as css lib, and have some css override in two files of mine "app.css" and "mio.css"
the app works just fine until I hit refresh in a controller that handles two partials, than everything gets reloaded except for my 2 css files.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/mio.css">
If I inspect them they contain the index.html data (head body dcc)
could you suggest what's happening??
Try using full file paths to the css files. For example..
<link rel="stylesheet" href="/assets/css/app.css">
The issue might be on the server side. Since angular apps are single page ajax applications, the server has to redirect all requests to the index.html page EXCEPT for assets. Your server might be returning the index.html page instead of your css files.
i'm very confused about how to add css files to a blog a made on django following this tutorial: http://www.programmersbook.com/page/21/Django-Beginner-Tutorial-Part-I/
Basically, i want to add a css style sheet to my blog. I've looked around a bit and seen somethings about static and media files and urls. I read a bit about them on Django's website but coulnd't fully understand them.
So, could anyone kindly tell me how i should display:
<link rel="stylesheet" type="text/css" href="style.css" />
They styles work when i do it internally, but how do i show external stylesheets?
It's right in the Django docs, check here. Follow the instructions there and you will be able to use something like that:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" />
EDIT:
You should sepearate you "static" files from your templates. So move all your .css, .js and images to one directory in your app (it's default name is /static). Honestly, everything is written in the link provided.