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.
Related
I'm currently learning about html and css. I've learnt about this code,
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
It was said that external stylesheets can be loaded with 3 ways, and that's one of the ways.
So my question is, does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet my html document?
ps. sorry for bad english
edit: the link comes from w3schools, i'm learning the basics from there. if i shouldn't have done that please tell me so i can remove it.
The following
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Will download the styles.css file from www.w3schools.com/html/. In that case, you only have to upload your html file. The downside is that if the w3schools.com admin deletes the file you don't have control over his decision , your page will not find it anymore.
The best thing to do is to put a local my_styles.css file in the same folder as your html file and then
<link rel="stylesheet" href="my_styles.css">
This means you will have to upload your html file and my_styles.css. In this case the style will be always available for the webbrowsers to download.
does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet
No. The stylesheet needs a URL so the browser can access it. It doesn't have to be a URL hosted by a particular website.
It doesn't matter where that URL resolves to (unless it is one that isn't accessible to the browser — e.g. if the URL is on a private LAN and the browser isn't on that LAN).
No it doesn't have to be uploaded anywhere. The href attribute simply expresses where the file is. The value of the href can be relative or absolute.
Relative
Relative paths are relative to the folder your HTML file is in. So imagine you have an HTML page webpage.html and a CSS file styles.css in the following folder structure:
My Website
|-- css
| `-- style.css
|-- images
`-- webpage.html
Your link element could use a relative path like this:
<link rel="stylesheet" href="../css/styles.css">
../ to go up a folder, then css/ to go into the css foler.
Absolute
An absolute path points to the same place no matter where you're pointing from. In the folder structure above, if My Website was the root directory of our website, we could use absolute paths a couple different ways:
<link rel="stylesheet" href="/css/styles.css">
/ to start at the root directory, then css/ to go into the css folder
OR
<link rel="stylesheet" href="http://www.mywebsite.com/css/styles.css">
This would directly load your CSS from the URL like the w3schools example.
https://www.w3schools.com/tags/tag_link.asp
<link rel="stylesheet" type="text/css" href="my_style.css" />
https://www.w3schools.com/tags/att_style_type.asp
<style type="text/css">
...
</style>
https://developer.mozilla.org/tr/docs/Web/CSS/#import
#import 'custom.css';
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
How do I use icons from sites like The Noun Project and Font Awesome on my website? I know how to download them but how do I locate where the icons are stored in the CSS folder and use the downloaded one?
I'm editing from a template so I have to use the same icon name, just save over it I assume...
PS: I'm using sublime text.
I would advice you to read the Get Started section first.
Using CSS:
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Check out the examples to start using Font Awesome!
I'm trying to add an external css file in my index.html.
Organization-name - codehunks
My directory structure is as:
codehunks.github.io
_layouts/
style.css
LICENSE.txt
README.rst
index.html
I tried adding it as:
<link rel="stylesheet" type="text/css" href="_layouts/styles.css"/>
but it didn't work.
I searched and get to know that raw.github.com/../.. doesn't work in case of css/text
I found some articles adding it by providing link as [username].github.io/[repo]/[folder]/[filname] but this didn't work for my organization.
I tried adding it as codehunks.github.com/codehunks.github.io/_layouts/style.css but the link is giving me 404 not found response.
Any possible solution or I'm following something wrong.
Here's my page codehunks.github.io and here's my code Source Code
your style will work at /styles.css if you put it in the root, _layout folder is used by jekyll/ruby.
create a css folder in the root of your repo and put the style in there.
/css/style.css instead.
I am using a Dedicated Server.
In the web-hosting side, I have folders arranged like so.
html
forum
files
images
files
Equinox
index.php
header.php
footer.php
style
style.css
mc-multiplayer
style
style.css
index.php
header.php
footer.php
I am trying to get the index.php of mc-multiplayer to link to the css file in mc-multiplayer, but no matter what it keeps going to the style.css file in the html folder.
At first glance I would suggest using the following code:
<link rel="stylesheet" href="style/style.css">
Make sure to confirm that everything is cased/spelled correctly and that directories are correct. As Kevin Boucher suggested, it would help to know the link you're currently using.
from a page within the mc-multiplayer subdirectory (as long as a <base> element isn't overriding the directory context)
this might work (no prefix (such as / or ../) before style should maintain the current folder context, then style subdir then the file):
<link href="style/style.css" rel="stylesheet" />
this should definitely work (/ to start at the root of the site then into mc-multiplayer subdir then style subdir to the file):
<link href="/mc-multiplayer/style/style.css" rel="stylesheet" />