I am trying to add a an icon from font awesome but for some reason it does not appear when I load the page.
Below is my html code in which I attempted to add the font awesome in different ways.
<html lang="en">
<head>
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial=scale1.0">
<link rel="stylesheet" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car" aria-hidden="true"></i>
<h1>
<i class="fa fa-car" aria-hidden="true"></i>Dummy Text
</h1>
</body>
</html>
Is there anything that am missing in the code?
You can add font-awesome css file in your "main.css" file
#import url('/font-awesome-4.6.3/css/font-awesome.min.css');
If you are planning to use CDN just add one line it to your css file (i.e. main.css) indicating from where the font style should be imported
#import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
source of the link used in the example above: https://www.bootstrapcdn.com/fontawesome/
Try to call form font-awesome like this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
Or if you try from your site folder then download font-awesome and add fonts into your fonts folder and add font-awesome css into css folder
then call it like this:
<link rel="stylesheet" href="css/font-awesome.min.css">
What you put in your link is the name of your folder.You should put the name of the file instead(font-awesome)
On the font-awesome folder look for the file called font-awesome,copy and paste on your browser text field so that you can see the correct path.
Copy that path and paste in your link like this:
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
Just check the path correctly cause I see no other mistake.
let me know if it does not work.
Related
I am wanting to link a stlyesheet to my html doc, but it is not applying to my website. When I had the same css as an internal stylesheet, it worked fine but will not work as an external page. Attached is a screenshot for reference
You can try change with this way:
<head>
<link rel="stylesheet" href="styles.css">
</head>
change sylesheet to stylesheet
You can try this way.
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
If I take css script from this example W3Schools and I put it into 2 external css file (font.css and menu.css) and then I called them in html, the arrow from Dropdown menu disappear.
The content from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css is in font.css and the entire content of tag <style> is in menu.css.
I can't include web link because I don't have access to internet where I want to create this.
The code ended like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="font.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
</head>
<body>
<!–– Rest of the code...-->
</body>
</html>
its not enough to copy content of https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css to your css file! since there is some linked fonts and images that directed by "Relational Path"
in this case you have to use External CSS URL replaceing with your local css file
means;
replace
<link rel="stylesheet" type="text/css" href="font.css" >
with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
or if you want to use offline , you have to download FontAwesome toolkit from
https://fontawesome.com/download
and use it in your source code
there is sample files in downloaded archive file...
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
I typed the below code in the section of the HTML. However, the CSS code and the bootstrap is not being recognised by the HTML.
<link href="C:\Users\Robert\Desktop\Websites\public_html\Main.css" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\Robert\Desktop\bootstrap-3.3.4-dist\css\bootstrap.css">
<link rel="stylesheet" href="Main.css">
What am I doing wrong pls?
You can find this answer very easy by using google.
I would do the following. Create on your desktop a directory website. In this directory create a directory called "css", "js", "img". Create in the directory "website" index.html and enter this in the document:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Try making a container in your html file like:
<div class="container">
some text...
</div>
Use inspect element in firefox and you can see if your browser reads your css file.