I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.
Related
p{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sport.scss">
</head>
<body>
<p>Helllooo</p>
</body>
</html>
I wrote two other pages in this project correctly. But, when intended to code the third one, changes didn't apply at all.it seems that my html code doesn't receive the styles.
Surprisingly, the sass file fully converted to CSS file, and no problem was evident.
SASS / SCSS is a preprocessor for CSS, and can't be interpreted by your browser.
This is a duplicate question and possible solutions have alredy been described here: Attaching a SCSS to HTML docs
if you are using vs code download a sass extension which will convert your sass code into a css code and then you can link that css file generated by the extension to your html page
i will recommend scss-to-css extension by yutent as it doesn't require you to make it active like other extensions
you must read documentation sass official and follow this guide https://sass-lang.com/guide. if you not install sass this two way how install sass
read this https://sass-lang.com/install
or download extension in visual code
if you are still confused change your sass become sport.css
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
Why is my main.css not updated ?
So far I have changed main.css to style.css following this advice:
Jekyll site works locally but not on Github Pages
As you can see I kept style.css in /css/ directory, as guidelines from different sources conflict each other I put it back to default.
https://github.com/bomengeduld/boilerplate/blob/master/css/style.css
I have tried running from master branch & gh-pages branch. Maybe I made a mistake here? Since it's now running from master, as I am building from master.
As an alternative I tryed using LIQUID without significant result
<link rel="stylesheet" href="{{ site.baseurl }}/style.css">
I put it back to default, but moved custom css above bootstrap core css
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="{{ site.author }}">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
Thanks to all the advice here on stackoverflow I have updated my config.yml file to the needs of GITHUBpages
url: https://bomengeduld.github.io/boilerplate/
baseurl: /boilerplate/
port: 4000
markdown: kramdown
permalink: pretty
I have followed several guidelines on stackoverflow without any succes.
As I am new to developing, I might miss something very simple.
EDIT 1:
I have added the css to a <style> tag in <head>. It solved everything except for my background image. Yet, this is not a long term solution.
I restarted this project.
I started a new repo, cloned it and downloaded html5 boilerplate & updating with bootstrap to the rootfile.
Then I copied most of existing html code from 1st project into the new project.
Because I needed a scrolling navbar. I restarted my project for the second time from https://github.com/BlackrockDigital/startbootstrap-scrolling-nav
I cloned it, and copied all my existing code.
In the meanwhile I was commiting every little step I took, to be sure the results on jekyll, where the same as on github-pages.
So far it worked like a charm.
There are some issues when adding images for instance. On jekyll localhost, it accepts any type of file.
On github pages You sometimes have to change png to jpg.
Also never use an underscore _ in the title of your files like photo_01.png
If you put a img tag, do it like this
<img class="img-responsive" alt="logo" src="img/mmlogo2.png">
To make some picture appear on mobile device I had to use <style> in <head>
Because it just wouldnt work on CSS
I'm having quite the weird issue. My Django (1.10) app is functioning just fine. I initially set it up using bootstrap with my own style.css file to customize the rest of it. However, since then I've had some issues and lost my git commits, so I can only go back to about 10 days ago when it was stable in production. I thought all was well until I tried to style some new pages and change some existing css, and then I found I couldn't.
My app seems to have style.css files all over the place. There seems to be 4 total, and none of them do anything. I've tried deleting everything from each one individually, and then deleting everything from all of them at once, but no matter what my site stays with its styling. I've cleared the cache from my browser, used a different browser, used incognito mode, etc. No matter what, the styles persist. I initially used collectstatic. Now, I've tried to do it again, and I've also tried collectstatic --clear, but both have the same effect: my root static folder gets an entire copy of my app put in it and I have to delete the changes with git.
Here's a link to the github page for it. And I'll post some relevent snippets below. Please let me know if any other information will make it easier to help, and I will be happy to provide it.
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
Top of my base.html file which every other template derives from (note the last two lines):
<!DOCTYPE html>
<html lang="en" id="divTheme" class="light-theme">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>OP Translations</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'translations/style.css' %}" />
When I run collectstatic, it tells me the files will be collected in the top level static folder, but that is one of the files that does nothing when I change it.
I'm not really sure what else to post, so please let me know. All the existing posts on this question say its a browser cache issue, but for some reason that doesn't work here. I must have something else wrong.
I can't write a comment to ask something but i think that you edit the wrong style.css file.
I take a look in your Github project and found out that the style.css in https://github.com/technicallyrice27/translation-site/tree/master/translations/static/translations was not updated since 11 days.
but this is the file you need to edit when using the collectstatic command.
Hope this help you.
Doing a website for a client and I merely changed the name of the css file in the folder and in the references on each page. And suddenly all my styling is gone. I've checked multiple times for spelling errors and it's all correct and I do believe I have referenced it correctly as it was working previously under a different name. My Question is How can the changing of the css file suddenly stop it working if it's still referenced correctly? Could it be that bootstrap is overriding it somehow?
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script><!--Reference Bootstraop.min before plugins.js but after jquery.js. We alterbootstrap javascript with plugins.js -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</head>
Here is the <head> for my index html file.
The problem only occurred when I changed the file names but I can't leave it as "TestLayout" when it is a completed project. Any help is appreciated and I can supply what I can to help find the solution. Thanks in advance.
First off, a small tip: Load your custom CSS-file AFTER the bootstrap.css file. This way you can ensure that your styles are easily overriding the defaults of Bootstrap, so you don't have to bash in !important in order to change something.
And for your question, have you accidentally removed css/ from the beginning of your style.css? Since all the other CSS styles you have linked are under the CSS-folder.
Double check that, otherwise it should work, the name is valid.
If the path to your CSS file is still correct (and you haven't inadvertently removed the folder from the file path as per ProDexorite's answer) then you might need to completely refresh your browser.
You can do this with CTRL+F5 or to be completely sure you can empty your browser cache, although I usually find this isn't necessary.
ProDexorite is also correct regarding the CSS files - it's called Cascading Style Script which means any styles in the files you load last will overwrite the files loaded before. Therefore any custom CSS (main.css and style.css for example) should be loaded AFTER the Bootstrap or any other library css files. This just means you need to reference them in the right order in your page that's all.