I am using font awesome icon but I am not able to display the font awesome icon. I store the font awesome CSS file inside my main folder and added the path
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
but still not able to display.
Then I added whole URL
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
then icon properly displaying.
Please help me why I am not able to use font awesome from my root folder? Please check the below image.
I am getting output
Index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
</head>
<body>
<i class="fa fa-thumbs-o-up"></i>
</body>
</html>
After adding all fa package then it's working. Check image
Related
I'm new to the Bootstrap world and I am following an online class to learn Bootstrap.
From there I learnt that I can have custom CSS classes that I can use in my webpage.
So I have created a folder called my project folder and I have linked the path in head of my page.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" herf="css/styles.css">
But now the CSS effects sre not reflected in the webpage
.footer{
background-color: #D1C4E9;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
I have used sublime as an editor, linux(ubuntu20)
EDIT 1.1 This is the Bootstrap get started template not the one you linked.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
It's a blank slate template, open for you imagination. Try looking at the component section on the Bootstrap website # https://getbootstrap.com/docs/4.5/components/. Adding component in between the body tag will get you started.
Bootstrap uses CDN's Content Delivery Network to load stylesheets and javascript files. CDN's have minimize delays in loading web page content by reducing the physical distance between the server and the user. CDN's don't use local path and have better performances most of the time.
It's common and best practice to use CDN's with a local fallback in case the CDN connection fails. In your case, your problem is probably coming from your local url path. If you don't want to use CDN's make sure your local pathing is right.
You have a typo in your CSS link. the word href is spelled wrong. that's why your CSS can not be detected.
Wrong:
<link rel="stylesheet" herf="css/styles.css">
Right:
<link rel="stylesheet" href="css/styles.css" />
Does anyone know how to preload typekit font? Right now my computed font is Ariel and I get the error:
The resource https://use.typekit.net/dwg7avv.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The font works if I do a normal import.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>
<body>
This is my font.
</body>
</html>
Short answer, you have to load the stylesheet at the end of your head element.
For explanation why, you can check out the documentation from mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
So with your example it should be like:
<head>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
<link rel="preload" href="main.js" as="script">
...
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
I've just faced exactly the same problem, and I did solve with this structure
<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
<!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<link rel="preconnect" href="https://p.typekit.net" crossorigin />
<!-- We use the full link to the CSS file in the rest of the tags -->
<link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
</noscript>
This article helps me to solve it and know why
It's a bug, I had the same problem and i'm now giving up:
https://bugs.chromium.org/p/chromium/issues/detail?id=593267
Funny is, the only reason I tried to use preload, was of the chrome lighthouse test that recommendet it to me.
And here the picture of it kinda preload but not actualy working!
<html>
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="header item"><i style="font-size: 20px;" class="edit icon"></i>Blog Site</div>
Home
New Post
</div>
</div>
<p class="sample"> I can style here with css in app.css</p>
Can anyone help with the css/semantic-ui problem, please?
When I use style tag in the file as above it is working but if try to style something in my app.css file it does not work. I can style something else that I did not use semantic-ui in but I cannot style anything that has something from semantic-ui.
For example: I can style the class "sample" in my app.css file but cannot style class "item".
Thanks!
Its because of your files precedence in header, it read line by line first come first serve.
Always add your custom file in the end of header so that your custom style's overwrite default styles.
Replace below code
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Move semantic.min.css in top of app.css...
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
For whatever reason I can't seem to get my custom stulesheet to link to the HTML index. Bootstrap and Font Awesome styles work perfectly though
My HTML IS is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- start of scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- (bootstrap3) Latest compiled and minified JavaScript -->
<!-- end of scripts -->
<!-- start of stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- (bootstrap3) Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- (bootstrap3) Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- end of stylesheets -->
</head>
<body>
</body>
</html>
CSS is:
body {
background-color: lightblue;
}
And the File structure is:
/root
/css
-style.css
/js
-scripts.js
-index.html
Place your custom stylesheet after the bootstrap stylesheet in your head. The browser will read down, so custom stuff always comes last. In your code, Bootstrap would always take precedence over your custom style.
<link rel="stylesheet" type="text/css" href="css/style.css">
Or you can mark your custom css as !important:
body {
background-color: lightblue !important;
}
More on specificity here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There is something you need to know about CSS. your style sheets are read by the order you have added them. so you should add your own CSS file at the end for keeping them from overriding by previous CSS files.
if you have
.bg{background:red} in your first CSS file, and
.bg{background:green} in your last CSS file.
whenever you add .bg to the elements , the background color will be green not red.
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release