It has been four days since I have been trying to use my theoretical HTML and CSS knowledge to create a personal webpage.
Since I am still a beginner I did not host it and I am still under the process of creation.
I tried to create a favicon for my webpage so that it appears instead of the default "white paper with a fold on the top right."
Here is the code I have written:
<head>
<title>RAMYA VEMUGANTI</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="header">
<h1>Ramya Vemuganti</h1>
<hr/>
</div>
</body>
A few things:
<link> tag should be inside of <head> tag
You have two closing <head> tags
Your <div> content should by wrapped in a <body> tag BELOW the <head> tag
Make sure "favicon.ico" exists in the root location of your web server
and the tag should look like:
<link rel="icon" type="image/png" href="/favicon.ico" />
Related
I think I have followed the steps for a previous post about this question. But I get no error but I get an alternating question mark and exclamation point on the display.
There are no errors in the Chrome debugger console. If I hover over these alternating "buttons" I don't get any tooltip or additional information. So it seems that the class has been recognized and the button loaded but there is some kind of error that I cannot determine.
Here is what I have so far
Downloaded and the zip of the FA components
Add link to index.html under wwwroot (this is a client side Blazor
application)
Referenced the classes in my component
<button class="fas fa-angle-double-up">Up</button>
<button class="fas fa-angle-double-down">Down</button>
But this doesn't seem to work. Ideas?
I have tried including the .js from Fontawesome but still no luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BreakpointManagement.App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BreakpointManagement.App.Client.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
<script src="_content/BlazorTable/BlazorTable.min.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
I added all paths, as #JasonD mentioned
added this line at component file
and added these lines at index.html
and voi-la
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
I'm using react/webpack to run a development server on local 8080. This is something I don't quite understand yet and I've run into this problem before. Bootstrap is being linked in the HTML and is running fine. However, when I link the stylesheet, the console is giving me an error of 404 not found for my stylesheet.
Here is my HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Index.html and Index.js are at the root level, and so is the /Public directory, which only contains one file: stylesheet.css.
Why is stylesheet.css not loading in the browser when I run the local server and how do I fix this? Thanks.
if your sharing out the public folder with express like so
app.use(express.static(path.join(__dirname, 'public')));
then you do not need to have 'public' in the source.
in other words this
<link rel="stylesheet" href="public/stylesheet.css" />
should be this
<link rel="stylesheet" href="/stylesheet.css" />
I am not able to display a favicon on the webpage. I am using IE8. I have used the below markup in a .aspx page:
<head runat="server">
<link rel="shortcut icon" href="Images/favicon.ico" />
</head>
I have kept the favicon.ico file in the Images.
It is displaying on other browsers like Firefox and Chrome, but I want it to be displayed on IE. What would be the settings to do in IE?
You cant take few actions:
Set the link elements to runat=server
Move the favicon.ico to the root (if you can).
Use conditional comments to show the favicon for old IE
Clear your browser cache.
Code Result:
<link runat="server" rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="Images/favicon.ico" type="image/ico" />
<!--[if IE]>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
Further:
Most browsers will pick up the favicon if you simply put it in the root folder, so that would be the best place to put it even if you also have a link tag that points to it.
Make sure the file name must be favicon.ico and place it on the root folder not inside the images. It will display in IE too. Do not forget to clear the cache.
try use this :
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.