I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
Here is the HTML:
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
Source:
https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>
you can try taking a look at the above snippet. You may also use the below link for other similar issues:
https://cdnjs.com/libraries/semantic-ui
You don't need to use font-awesome of any other library
try cdn first Official icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
somethimes this doesn't work so what you can do is
go semantic-ui official page
download semantic ui zip folder and extract
in component folder you can find icon.min.css
include that file in index.html
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
<i class="disabled users icon"></i>
ENJOY
My solution was pretty simple (once I worked it out). I had edited themes.config to use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.
/* Elements */
:
#flag : 'supernewtheme';
#header : 'supernewtheme';
#icon : 'supernewtheme';
#image : 'supernewtheme';
#input : 'supernewtheme';
:
Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my build folder in the correct place, it was.
Changing the theme back to default for #icon did the trick:
#icon : 'default';
if someone is using electron or any other JavaScript framework.
This might work for you.
Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great.
Basic solution I opted is in reference to this official error reporting.
Also in my UI icon wasn't appearing for a drop-down so I used console to solve like
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
Hope it helps.
Related
Managing multiple stylesheets in Blazor
Background
I am a backend developer creating a Blazor WASM website.
Problem
I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).
With Mudblazor stylesheet active, the text editor does not work as expected
What I've Tried
To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result:
With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
The Code:
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Writers Friend Web App</title>
<base href="/" />
<!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
<link href="css/app.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
</head>
TextEditor.razor
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>
#code
{
[Parameter]
public Action<string> OnTextChange { get; set; }
}
What I'm looking for
I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.
Thank you in advance!
My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.
[I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html. I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics. Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc. Running the code works perfectly through here so I don't understand what's wrong. I'm using safari on MacBook and have also tried chrome - should I use a different browser or?
Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?
h1{
color: red;
}
p{
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>First Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>First code</h1>
<p>Welcome to my first set of code!</p>
</header>
<NAV>
<ul>
<li><a href "#">nice</a></li>
<li><a href "#">cool</a></li>
<li><a href "#">rad</a></li>
</ul>
</NAV>
<footer>
<p>Nice amiright?</p>
</footer>
</body>
</html>
There actually 2 ways to achieve that. The first Method has been already stated and that is to link the external CSS inside the head-element of your website:
<link type="text/css" rel="stylesheet" href="url to the external .css" />
The second method however has not been mentioned yet which imo is the better one. Create an own .css file and link your website to it. Then add following line at the very top of your css file. That allows you do overwrite or change specific element of the css that you might cant access on your own:
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
We have two various types of Href
Absolute Path [it's added through an External Link]
Relative Path [it's added through an Internal Link]
The way you wanted to have is definitely the first item of the above-mentioned issues.
It'd be like this:
<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">
I am working in Visual Studio Code, with extension "open in browser" so that I can preview my code in Google Chrome. I have my basic HTML done, and I am trying to link it to an external CSS file. However, the background color I have set in the CSS file is not showing up.
I have looked up solutions and can't see any issue with my code.
HTML
<head>
<title>Site</title>
<link rel = "Website Style" type = "text/css" href = "ResumeStyle.css" >
</head>
CSS
body{
background-color: darkgray;
}
This should change the background to dark gray, but it remains white. I'm not sure if it's an issue with my code or if it has to do with the Chrome extension. Sorry if its a basic question I'm just not seeing the issue.
Change rel="Website Style" to rel="stylesheet". Also double check the path to your CSS is correct.
You can read about the different rel attributes here: https://www.w3schools.com/tags/att_link_rel.asp
It's likely that your issue is that you are modifying a CSS property for 'body', but you aren't using 'body' in your html file.
Check out this simple example from W3Schools Here
This is what I'm thinking you might need, just adding the body tag.
<head>
<title>Site</title>
<link rel = "Website Style" type = "text/css" href = "ResumeStyle.css" >
</head>
<body>
</body>```
You need to check the path: if the css' file and the html's file are on the same folder.
If they are, then:
</head>
<link rel="stylesheet" type="text/css" href="ResumeStyle.css">
</head>
If the stylesheet is on another folder then you need to change the href.
Also check if the ResumeStyle name is correct, capital letters matters.
And check if you really have a body in your html.
If any of these answer works for you, please leave a vote.
There is a great answer about that here.
Recheck the spelling of file, even the capitalize letter can cause this issue.
If I try and link my CSS to my HTML page with either cssstyle2.css ||fifastream1.0/cssstyle2.css or even %fifastream1.0%/cssstyle2.css it wont display any of the CSS on the webpage. (FF, IE, Chrome). I've uploaded my CSS page to stackoverflow before and apparently its fine.
Obviously its no good if I can only get my webpage to 'properly' work on my drive. Soo any idea's why FF, IE or Chrome cant pick up my CSS?
Been working on this for a few weeks now, as a complete beginner. Would be great help if someone could find the answer! I've searched and tried everything.
This is the link in the of the HTML (if this helps at all)
<!DOCTYPE html>
<html>
<head>
<link href="C:///*****/******/Desktop/FifaStream1.0/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
<title> Fifa Stream </title>
</head>
<body>
When everything is in the same foldre you should use the following:
<link href="cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
When you're CSS file is in a different folder use:
<link href="folder/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
If your CSS file is one directory above the html file then use:
<link href="../cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
To have relative referencing, ur CSS needs to be in at least somewhat referential place. for example, if the page is in Users/whatever/index.html, your CSS would be in Users/whatever/css/style.css. Then your reference would be to "css/style.css"
A quick reference guide:
<!--
./filename or filename = same folder as page location
../filename = folder above that of page folder location
/filename = root folder of project
-->
If your CSS file is in a completely different location than your page file, it can't possibly be found unless you provide the full path as you had to.