I am trying to include Google Fonts in my Moovweb site via #import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700); and then including the tag 'Oswald' in font-family. I have done this before with static sites, but for some reason it is not working for me. I am not sure if I am placing the code in the right file? Seems like a simple fix, if someone could provide some guidance it would be greatly appreciated.
Why are you using #import ? Can you not create the link tag on head of your file?
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Is there any message on the console?
Related
I am aware that in HTML the way to reference stylesheets is something along these lines:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
But what is the stylesheet reference for MDboostrap. I have looked all over the website and I can't find it and the website says that all the resources are free. Have I got to install something?
I did a quick research and I could find that you can download MDBoostrap or use the CDN. Links bellow:
Download page: https://mdbootstrap.com/docs/jquery/getting-started/download/
CDN examples: https://mdbootstrap.com/md-bootstrap-cdn/
I am trying to add preloader to my HTML pages but it isn't showing any preloader? I even copy-pasted the codes and CSS from web resources like codeopen but it isn't showing anything. If someone experienced the same and tackled the situation then help me.
<link rel="preload" href="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" as="script">
Will Preload an javascript file with the as html tag. Don't forget that!
Then later in your html, it will be used at preload cache often.
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0.
But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file.
Here my code:
<html>
<head>
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-user-circle-o"></i>
</body>
</html>
Does anyone know what is the issue?
There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.
There are two ways to go about this problem:
font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You have to host the font files too. Go to the fontawesome website and read the related documentation.
Font awesome get started
As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.
As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.
Copy the entire font-awesome directory into your project.
In the of your html, reference the location to your font-awesome.min.css.
Total beginner here looking for plain English answers :)
I managed to successfully link my HTML and CSS sheets when using Atom and viewing the files in my browser, but now I'm trying to get this into my GitHub pages website and I can't make it work at all!
Here's the HTML: https://github.com/isbonnici/isabellabonnici.github.io/blob/master/index.html
Here's the CSS: https://github.com/isbonnici/isabellabonnici.github.io/blob/master/CAstylesheet.css
What am I doing wrong? Really would appreciate the help here.
There is no css folder in your github account. Remove css/ from the css path. It should start working. Change
<link rel="stylesheet" type="text/css" href="./css/CAstylesheet.css">
to
<link rel="stylesheet" type="text/css" href="./CAstylesheet.css">
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/