Font Awesome icon is not loading
this is my code
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/eb5f64bb0d.js" crossorigin="anonymous"></script>
</head>
<body>
<div m-5>
<i class="fab fa-google-plus-g"></i>
<p>google</p>
</div>
</body>
</html>
I am getting this error
eb5f64bb0d.js:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
what is wrong in my code
The URL you are trying to load returns a status 403. Do you have access to this resource and are you loading the literal value randomstring.js or do you have a value provided by FontAwesome like 6e7c0a9cd2?
kit.fontawesome.com sends you it should a value. I just signed up with an account replaced the randomstring.js with the random string they gave me for the file name in your code sample and it worked.
See sandbox here with your js file and sample
Related
I created a vite using tailwindcss project and ran
npm run dev
This is the error message from my terminal
enter image description here
this is the index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"href="https://rsms.me/inter/inter.css">
<title>aadda</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
The error message points out that your code is missing a whitespace between attributes. I can see that your second <link> tag inside the <head> is really missing a whitespace between the rel and href attributes. Try adding the whitespace: <link rel="stylesheet" href=" https://rsms.me/inter/inter.css">
I have this html file called register.html.
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<!-- Custom css Style -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="hello">Hello</h1>
</body>
</html>
The css file is in the same folder as the html file.
This is the style.css file.
.hello {
font-size: 100px;
}
When I run the code it says that the resource style.css can not be loaded.
When I open the raw file using safari it work but when I use the flask server it doesn't work.
Whats wrong with my code?
style.css most probably is being resolved by the browser to something like http://your-server.com/style.css (implying you are viewing it from index.html from the root of your server), so if your file is not in the same directory or the web server is not configured to serve such files, the browser won't load it.
May be it's a path error. style.css are not available on that specific path.You can check complete error by inspect element on your browser console or in application logs too.
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.
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.
I am new of Font awesome. I have written a simple example following the Font awesome demo, but it did not work? it did not display the camera, why? please help me. The simple example is:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body >
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
You have to add http: or https: prefix to the URL. For example
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
You asked some previous questions about jqGrid. See the demo from the answer as an example of usage of Font awesome inside of jqGrid.