Attempting to include font-awesome without CDN - html

Before I being I just want to say I did research this question, and I saw this post and followed the top answer's instruction but still nothing.
Okay here is a picture of my directory:
The fonts folder is just the regular fonts folder that comes with the font-awesome download. I then put the css file that came with font-awesome under css/font-awesome as shown below:
Here is a picture of my HTML code:
Here's my HTML Code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tinyone</title>
<!-- CSS -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" >
<link href="css/font-awesome/font-awesome.min.css">
<!-- jQuery/JS/Fonts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
</head>
I must be missing something, if anybody has any ideas could you please share them?
Thank you so much for reading, it's greatly appreciated.

The paths were all correct, but I forgot to include the rel="stylesheet" attribute to font-awesome <link>.
Thank you to RompePC for pointing this out to me.

Related

XAMPP not loading CSS files

I am running Ubuntu on a VM.
I installed XAMPP.
htdocs is the root directory.
File in question: htdocs/index.php
CSS Directories: htdocs/css/, htdocs/lib/
When I enter "https://localhost/home/index.php" in the search bar, only the html loads.
I have ran XAMPP on Windows for over a year and never had any problems.
I have tried several solutions already online and none of them have made any difference.
htdocs/index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="img/favicon.png" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Template
Theme URL: https://bootstrapmade.com/bizpage-bootstrap-business-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
</head>
<body>
This is such a petty issue. Any help would be appreciated.
Have you tryed to reset your Browser Cache?
Shortcut for that is SHIFT + F5
You may be using browser caching? Maybe just try a hard refresh CTRL+F5 (Sorry if this is obvious but try it out)
OR
You can Use this while linking Css:
<link href="style.css?<?=filemtime("style.css")?>" rel="stylesheet" type="text/css" />

Failed to load resource (Not Found) (Internal Server Error) after uploading website on server

PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)

Webpage fails to load css file after declaring <!DOCTYPE html>

I am using JSP to create a webpage. I have linked the css file to the jsp page with <link rel="stylesheet" href="css/style_mobile.css" type="text/css">, which is the exact path of the file.
Google Chrome's inspect:
The content of <head> tag in my .jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="css/ratchet.css" type="text/css">
<link rel="stylesheet" href="css/style_mobile.css" type="text/css">
<link rel="stylesheet" href="css/tablesaw.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="js/tablesaw.js"></script>
<script type="text/javascript" src="js/tablesaw-init.js"></script>
<title>Mobile</title>
</head>
CSS files:
ratches.css
style_mobile.css
tablesaw.css
The webpage just does not load the css content. Please help.
On your developer tool go to -> Network tab. And Select -> CSS. Reload the page. You will see the list of css files included on your DOM along with its status. From here you can from where the files are loading. If not loading you will find them as red marked with 404 status.
You have to make sure the relative path you used and the directory of the css files are same location.
Well, I solve my problem with inline css, although this is not the best solution.

How to link customized bootstrap into index.html file?

I am new to bootstrap (just started learning) and I have recently customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/
i compiled and downloaded and then i find it hard to link it with my index.html file. Source of bootstrap files is on local drive and in my code it looks like this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="desc">
<meta name="keywords" content="content">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>TITLE</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"/>
</body>
</html>
pls help :)
If you are new to Bootstrap, the first thing you should do is use the latest version (ie. Bootstrap 4.0).
A good way to kickstart your project is to use CDN, Bootstrap files are hosted in remote server so you don't have to manage Bootstrap files locally. https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn
Check the console in your browser to be sure everything is correctly loaded.
To include your custom css, just put in head your css like you would do with any html page.
<head>
<link rel="stylesheet" type="text/css" href="custom_main.css">
</head>

Index.html file CSS loading error

I just pushed a website live, and it's only loading "raw HTML." I've been troubleshooting on this for a few hours, and can't seem to work out why.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="http://www.example.com/favicon.ico"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Example</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
Any help would be much appreciated.
You are doing it right, the problem is that CSS files are residing in different folders. It is an advisable practice to create a CSS folder in the root of your site containing all the CSS files, something like that:
Then you just need to slightly modify your link elements in the header:
<!-- Bootstrap Core CSS -->
<link href="css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
And so you could keep adding more CSS files if needed.
I hope it was helpful!
Please double check the location of you css
if you put it in separate folder, you might want to use something like this
<link rel="stylesheet" type="text/css" href="../min/freelancer.min.css">
if its just in the same folder as your index.html
<link rel="stylesheet" type="text/css" href="freelancer.min.css">
now if you put in a separate folder with you index.html file
<link rel="stylesheet" type="text/css" href="min/freelancer.min.css">
just take note that "../" makes you go back one folder from the current location of your index
Problem solved. I had to combine all of the files into .index.html
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet" type="text/css">
Type is required please check with type.

Categories