I have a static website and I tried adding font-awesome. I already have bootstrap and jquery.
On firefox it displays a weird symbol, on chrome it displays nothing. Resources shows the font-awesome css. But it does not show the fonts. Resources -> fonts -> does not contain a fontawesome font. I looked at the directory structure/filenames and it checks out.
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="amara.css" rel="stylesheet">
<link rel="stylesheet" href="f-a/css/font-awesome.min.css">
<ul class="nav navbar-nav pull-right">
<li> <i class="fa fa-twitter"></i>s</li>
</ul>
Only error that I get is :
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.2.js:5374
Does anyone know what could possibly be the issue?
It is bootstrap stylesheet that is floating right and adding margin to it...
I just created this fiddle to show you what i mean
http://jsfiddle.net/fj5vj/2/
now if you add in some styles to override bootstrap you will see it now
http://jsfiddle.net/fj5vj/1/
.pull-right {float:none !important}
.navbar-nav {margin:0 !important}
And the last fiddle i removed the booptstrap style sheet just so you can see it
http://jsfiddle.net/fj5vj/3/
the following should work locally in chrome (floated to upper right):
<html>
<head>
<title>test</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li> <i class="fa fa-twitter"></i>s</li>
</ul>
</body>
</html>
without the http: it won't work locally:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
Related
I am making a website by watching this video: https://www.youtube.com/watch?v=oYRda7UtuhA&t=490s. timing: 25:10. I did as shown in the video, but the icons on the site are not displayed for me. When I add these commands, my section texts are moved to the center. and there are no icons. I looked on the Internet to solve this problem, but I did not find anything.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InkoGreat Website - Everything about programming</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Anek+Odia:wght#100;300;500;700;800&display=swap" rel="stylesheet">
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-
free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<img src="images/profile-logo.jpg">
<div class="nav-links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>COURSE</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa-solid fa-bars"></i>
</nav>
<div class="text-box">
<h1>Welcome to InkoGreat's website!</h1>
<p>This site publishes useful programs for programming,
new chips, tips and much more!<br>Python/HTML/CSS/JavaScript</p>
Visit Us To Know More
</div>
</section>
</body>
</html>
Change your font-awesome cdn url to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css. The link used by you seems to be invalid. Changing the link should solve your issue
This thing has happened multiple times to me. Most of the time, when using Edge, it does not display the icons.
This is probably a compatibility issue. So you are recommended to remove the line
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome- free#5.15.4/css/fontawesome.min.css">. As a developer, a more recommended way is to go to https://fontawesome.com/start (The latest version of FontAwesome) and create an ID. There, you will have more customisability to your icon pack and hence, make your icon pack light. You will also be provided with an option to add a js file in the HTML file which works without any problems.
I'm building a website portfolio using a HTML template. I don't have too much experience with css, but after importing the font-awesome css file both as a link and file in my django project, the icons are showing up as little boxes. I know the css file is being recognized because when I comment it out the boxes go away. I think there may be something deeper going on with the css that I don't understand.
I suspect there's something going on in the main css file if someone could help me out. Thanks!
Here's the code from the template:
<ul class="special">
<li><i class="fab fa-pencil" title="Edit"></i></li>
<li><span class="label">Magnifier</span></li>
<li><span class="label">Tablet</span></li>
<li><span class="label">Flask</span></li>
<li><span class="label">Cog?</span></li>
</ul>
Here's what I've imported:
<link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
<!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
You need to use the fas class and the pencil one will not show because it belong to the PRO package1 (https://fontawesome.com/icons/pencil?style=solid)
ul a {
text-decoration:none;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
<li><i class="fas fa-pencil" title="Edit"></i></li>
<li><span class="label">Magnifier</span></li>
<li><span class="label">Tablet</span></li>
<li><span class="label">Flask</span></li>
<li><span class="label">Cog?</span></li>
</ul>
You cannot use the regular version of these icons far because all of them belong to the PRO package2 so they won't show
ul a {
text-decoration:none;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
<li><i class="far fa-pencil" title="Edit"></i></li>
<li><span class="label">Magnifier</span></li>
<li><span class="label">Tablet</span></li>
<li><span class="label">Flask</span></li>
<li><span class="label">Cog?</span></li>
</ul>
https://fontawesome.com/icons/tablet?style=regular
https://fontawesome.com/icons/search?style=regular
https://fontawesome.com/icons/flask?style=regular
https://fontawesome.com/icons/cog?style=regular
1 As you can see below, all the versions of this icon are PRO so there is no way to use this icon with the Free package:
2 As you can see below, only the solid version isn't PRO so only this one is included in the Free package unlike the 2 others.
Related questions:
Font Awesome 5 on pseudo elements shows square instead of icon
Font Awesome 5 Choosing the correct font-family in pseudo-elements
Put it on top of all css and try to use without integrity and crossorigin parameters because even a little change by devs on file may not match with integrity and crossorigin you have on your website so it won't be used.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
Keep the fontawesome files in your local directory (asset/fontawesome)
Then Load fontawesome with static
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css'%}">
You can check this github repo here
Based on this code I cannot retrieve any glyphicons in Bootstrap 2.3.2.
What am I missing ?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap.icon-large.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-small" href="#">
<i class="icon-large icon-chat"></i>
</a>
<a class="btn btn-small" href="#">
<i class="icon-large icon-phone"></i>
</a>
<img src="glyphicons.png">
</body>
</html>
bootstrap 2.3.2 uses a png sprite in order to call its icons.
if you'll look inside bootstraps css file you'll see that it's looking for this image under:
url("../img/glyphicons-halflings.png")
whereas your image is on the same level as your css.
either change your png's location to this one (put it in the 'img' folder), or change the css file itself.
Mike.
I have this very strange problem.
I'm trying to code with Bootstrap 3. in the <head> I declare links for CSS to be used. Although the HTML completely ignores my third link.
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/custom.css" rel"stylesheet">
</head>
As you can see, the third link refering to css/custom.css is there correctly. But on the website it's being completely ignored.
I have tried coding a simple button using
<button type="button" class="btn btn-primary">Default</button>
And in custom.css I have the .btn class
.btn{
border-radius: 0px;
}
So the button's border should be straight not rounded like it is in bootstrap3. Problem is that my custom.css doesn't want to work and it's just completely ignored.
Can anyone please help me with this?
Thank you.
Patryk.
Add '=' after 'REL'.
Your code:
<link href="css/custom.css" rel"stylesheet">
Should be:
<link href="css/custom.css" rel="stylesheet">
If custom.css is correctly loaded than bootstrap code has a higher precedence, so you might want to use button.btn.btn-primary{border-radius: 0px;} or .btn.btn-primary{border-radius: 0px!important;}
As #Damian says it, the custom.css file is not loaded at all.
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>