This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
I can't get my font-awesome icons to show up. Tried importing css with multiple methods
(3 answers)
Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?
(4 answers)
Closed 2 years ago.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
This is the link where I need to get the script code from, but the link from here is not working.
The link to put in my HTML:
<script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
I think you are looking for a CDN.
You can simply google for packageName CDN.
I use bootstrap CDN for my projects, I would add this in my HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
But the CDN link might be different (e.g. you might want to use a different version of the package) so I suggest you to search it on the internet.
Related
This question already has an answer here:
CSS link to file on harddrive?
(1 answer)
Closed 3 years ago.
I have a laptop that rarely has internet connection. But I need Bootstrap and jQuery, so I decided to create local jQuery file and download Bootstrap and link to them in html file. So I use <link rel="stylesheet" href="D:/Bootstrap-4.3.1/css/bootstrap.min.css"> but it doesn't work. Same with jQuery. So I guess I don't specify paths to the files correctly. Or where's my mistake?
P.S. Codecademy forum says I do everything correctly
windows:
href="C:\users\documents\username\web\stylesheet.css"
but it still doesn't work
Don't link to a full path, but to the path from your index.html
So, if you had your structure like this:
index.html
[css] - folder
[css]/bootstrap.min.css
[css]/someotherfile.js
In your index.html you should link as:
<link rel="stylesheet" type="text/css" href="css/botstrap.min.css">
Technically you can still link with fullpath, but it's unnecessary and often creates confusion / you miss a slash and whatnot.
This is Hard to say What mistake you are doing Mostly Chances are as follows:-
Using full path instead of a relative path
Using Improper filenames
Or you can check these using chrome network panel weather these files are actually loading or creating 404
OR
I founded a starter kit which contains HTML, CSS, javascript, bootstrap and jquery
download it from GitHub from Here
#j_noe . Then if that is the case, to link to your CSS file try this in your html file.
<link rel="stylesheet" href="/../../Bootstrap-4.3.1/css/bootstrap.min.css">
This is on assumption that :- your html is in D:/projects/project1/main.html and css in D:/Bootstrap-4.3.1/css/bootstrap.min.css
This question already has answers here:
Bootstrap 4 default navbar is not working..
(4 answers)
Closed 4 years ago.
I have the same navbar in two HTML pages. On one page, it works perfectly with bootstrap/3.3.7. On the other page, I used Cards in Bootstrap 4.
When I comment out <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">, Cards works fine and navbar is not working. When I comment out <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">,
navbar is working but the Cards are not working.
Here is my code:
my code
why would you use 2 versions of bootstrap. bootstrap 4 has its own navbar. look at docs and use only bootstrap 4 so you can have both navbar and cards
This question already has answers here:
Limit scope of external css to only a specific element?
(6 answers)
Closed 5 years ago.
I am using Bootstrap 4 for my project and I need to add some div to my project. Problem is this div element created using Bootstrap 3. Is there any way to use Bootstrap 3 for specific div?
<html>
<head>
<!--use Bootstrap 4 js and css-->
</head>
<!--Start to use Bootstrap 3 js and css-->
<div>
</div>
<!--Stop to use Bootstrap 3 js and css-->
</html>
First and foremost, if that is the website structure you got it is incorrect, and a proper structure can look something like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<meta charset="UTF-8"/>
<!-- Any required CSS or JS files goes here -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Apart from that, Bootstrap does indeed have CSS classes including "div", however, most of what it does requires you to give a class to an element in order for anything to happen. If it does anything else, you should double check in what order you are linking your CSS files since it does matter, and if that doesn't help, make specific classes yourself in your own CSS file to override it.
This question already has an answer here:
Conflict Bootstrap, Prototype Js and Jquery
(1 answer)
Closed 6 years ago.
I am working on a site that uses javascript for a dropdown search list. The site also has a popover. When I put the source below into the header the dropdown search list does not have a search function working, however the popover works, and vis-versa.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
Popover
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Is there a way to make the scripts relate to specific source?
Thanks in advance.
I figured out the issue; the src had to be higher up in the Header. This page helped me: Can I use multiple versions of jQuery on the same page?
This question already has answers here:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Closed 8 years ago.
I want to use Google CDN for jQuery and jQuery UI..
I'm using the answer from here for jQuery.
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
but i don't understand this bit:
if (typeof jQuery == 'undefined')
so how can i do it for jQuery UI?
also, will this work with custom jQuery UI theme as this produces a custom js file too?
You can make the call using
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
You can also link to other Ui themes by changes the name of the theme. In This case change the name base to any other theme name /base/jquery-ui.css to any other theme.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
Check out the jQuery UI Blog for a link of all CDN links http://blog.jqueryui.com/
If you're concerned that the Google CDN ever fails or goes down, you can fall back to a local copy when the CDN is offline (this example is baked into templates like HTML5 Boilerplate):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')
</script>
If you are having a custom jQuery UI theme, you have to host that on your own server. Google only hosts the main jQuery UI themes.
If you want to check whether or not the jQuery UI library has loaded, you can do this:
if (jQuery.ui) {
}
Here is the list, just change to the version you need.
https://developers.google.com/speed/libraries/devguide#jquery-ui