I want to use bootstrap and font-awesome.
The document says just importint CDN.
it is my simple codes.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-flag"></i> fa-flag
</body>
</html>
However, flag icon didn't appear.
Could you tell me how to fix it?
http://fortawesome.github.io/Font-Awesome/get-started/
in
EASIEST: BootstrapCDN by MaxCDN
point 2
Pat yourself on the back for your scalable-vector-icons-on-the-website
judo solution in a single line of code.
you need a source
css only mapping positions
I prefer this case
EASY: Default CSS
If you're working locally you might need to add an "http:" in front of the CDN link. So try this instead:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
Related
this is probably really stupid question.
I love boostrap and using it CSS styling for pretty long time, how ever when i try to use any of their JS things it's not working for me.
I always make sure I have this in my tag but still
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
It looks i am completly blind or i don't know what I am always doing wrong. Is there a chance somebody can help me with that?
Thanks.
Example code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audatex History</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
You are missing JQuery
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Note: Include it before the bootstrap JS.
And you must initialize
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
Note: Include it before the end tag head.
Bootstrap relies on jQuery. Include it before you include the bootstrap JS.
this is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTI</title>
<link rel="stylesheet" type="text/css" href="../CSS/stile.css">
<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> <!--importare google font-->
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
</head>
in my "ridimesionapagina.js" i've some JS code that debunk some of my elements declared in my css code , but in this page it doesen't works why?
Well making the assumption that you're using jQuery in your ridimensionapagina.js file, one would assume you'd fix the issue by reversing the order you load the scripts so that jQuery is in fact available when your ridimensionapagina.js script loads and runs.
<script src="../JS/jquery-1.11.1.js.js"></script>
<script src="../JS/ridimensionapagina.js"></script>
instead of
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
If you use jQuery in ridimensionapagina.js, you should put .. include jQuery path to above to load jQuery before loading ridimensionapagina.js file
This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />
My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
Good Day all, i have been working with http://jsfiddle.net, the sample app i built and tested on jsfiddle is working fine and working as i want it. Now i have tried copy my codes out and run it on my local machine but its seems not working but the same exact codes are working online(jsfiddle).Here is the working version http://jsfiddle.net. Below is the structure of my codes locally which is not working:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="key, words" />
<meta name="description" content="description" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="alternate" title="Website Feed" href="rss.php" type="application/rss+xml" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>AstroSD</title>
<script>
var MyCheckboxes=$("input[name='toggle']");
MyCheckboxes.change(function() {
$("#kickoff").toggle(MyCheckboxes.is(":checked"));
$("#goal").toggle(MyCheckboxes.is(":checked"));
$("#halfull").toggle(MyCheckboxes.is(":checked"));
$("#halftime/fulltime").toggle(MyCheckboxes.is(":checked"));
});
$(function(){
$("#slideThree").change(function() {
$('#move').toggleClass("show-hide", this.checked)
$('#back').toggleClass("show-hide", this.checked)
$('#goal').toggleClass("show-hide", this.checked)
$('#halfull').toggleClass("show-hide", this.checked)
}).change();
})
</script></head>
I need help in structuring the head part using the script i have in http://jsfiddle.net/ so it will work accordingly. i believe am missing something here. thanks in advance.
The only difference in the src code of jsfiddle and your code above is this:
Hope you have given the Jquery src correctly: (Also if I may suggest - please use latest JQ library i.e. 1.7.. version but you know your code better)
Add this to your page please, hope it fits the need. :)
script
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>