The pages of my site in LowCodeUnit are properly loading all but one of my .css files - specifically 'font-awesome.min.css' which I have referenced as such (and validated on server)
<link rel="stylesheet" href="/assets/css/font-awesome.min.css">
How do I get my font-awesome icons to load properly?
We've had success replacing the stylesheet reference:
<link rel="stylesheet" href="/assets/css/font-awesome.min.css">
with a javascript reference instead:
<script src="https://kit.fontawesome.com/0b7385f8de.js" crossorigin="anonymous"></script>
Related
I'm trying to include css and js files in my php files on localhost:
<link rel="stylesheet" href="http://localhost/neu/css/bootstrap.min.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://localhost/neu/css/jquery-ui.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="http://localhost/neu/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://localhost/neu/scripts/jquery-ui.js"></script>
<script type="text/javascript" src="http://localhost/neu/scripts/bootstrap.min.js"></script>
I'm using xampp with this structure:
css-files:
php-files:
On the source view of the site I can click on the links for the .css and .js files and the correct files are shown.
I also tried href="neu/css/... but the same, the .css and .js are not loading on my page.
Also tried loading the .css from outside (like <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">) but the same.
So it is possible that xampp is blocking somehow the links? Thanks
Edit:
Screenshot from Developer Tools:
If your root folder is neu then I dont think its necessary to add hat in the address. try using ....href="css/... Also I sometimes experience no change in style when I add css until I clear cache.... I think in your case is the address and then try clearing cache
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國：世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.
I'm creating an interface using Bootstrap and CSS,but when I run this page without including the project in nodejs program the page appears very well but when I include the bootstrap folder in nodejs program,some icons didn't appear such as the logout icon and login icon(I got a recatngle in place of the suitable icon).Does any one know what is the problem??
Are you using font awsome for the icons? if so have you included those in you code ie,the following code into the head section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">?
I added this two tag to the header:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
A simple yet annoying error.. I can't load the Bootstrap css using the cdn
Here is the simple code
<html>
<head>
<title>Header template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-default">Hello World</button>
</body>
</html>
Two things might cause this:
The obvious one is that you should remove the spaces in the first link (looks like you already edited that)
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
How are you viewing this file? If it is not served via a webserver (and thus over http of https) then the protocol-less links won't work.
Does your browser say file:/// etc in the address bar? Then add http:// in front of //netdna.bootstrapcdn.com
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Add the the Href with HTTP request. Use this may help you and solve your problem
<html>
<head>
<title>Header template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-default">Hello World</button>
</body>
</html>
The inclusion of the “http:” or “https:” part is partly just a matter of tradition, partly a matter of actually specifying the protocol. If it is defaulted, the protocol of the current page is used; e.g., //www.example.com becomes http://www.example.com or https://www.example.com depending on the URL of the referring page. If a web page is saved on a local disk and then opened from there, it has no protocol (just the file: pseudo-protocol), so URLs like //www.example.com won’t work; so here’s one reason for including the “http:” or “https:” part.
Omitting also the “//” part is a completely different issue altogether, turning the URL to a relative URL that will be interpreted as relative to the current base URL.
The reason why www.example.com works when typed or pasted on a browser’s address line is that relative URLs would not make sense there (there is no base URL to relate to), so browser vendors decided to imply the “http://” prefix there.
For me it was the date and time problem. My date and time were not correct and when I visited the cdn link I got the date and time error. After correcting it was working fine.