I have created a vue webpack project using vue-cli.
vue init webpack myproject
And then ran the project under dev mode:
npm run dev
I got this error:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
So inside webpack, how to import the favicon.ico correctly?
Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html
Note that there is a static folder, along with node_modules, src, etc.
If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png
Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html
For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.
As a side note, here is the reason why I prefer PNG instead of ICO file:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
For some reason, the above solutions did not work for me before converting the default favicon.ico file to favicon.png and renaming it to favicon-xyz.png e.g. (I have put this file in /public folder) and edited the index.html file as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
.
.
.
</head>
Might be useful for someone.
Little update for Laravel 5/6/7/8/9, place your favicon.ico or favicon.png into the /public folder and refer to it in your index.html like this:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
Hope it helps !
As of 2022, #Mani answer is a little outdated as static assets are now served in public folder other than static.
Just generate a .ico favicon file (this site provides free online favicon generation), rename it to favicon.ico and place it in public folder, no need to change index.html, reload and new favicon will be displayed.
You may use vue-pwa-asset-generator in order to generate a full set of favicons foreach platform.
Thanks. This did the trick as per eightballs comments. I needed to move the file to the /public folder and rename it :D
<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="icon" href="<%= BASE_URL %>gear.png">
<title>Prodigy</title>
</head>
Just add shortcut in rel tag like that :
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
Related
I have a Vue/Webpack application that uses an external-referencing, embedded CSS link in my index.html file. It looks something like:
<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="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
...
</head>
If I run npm run build in the project directory, the resulting dist/index.html file will contain this link.
However, I am deploying my project in a Docker container. At the end of that container building process, this CSS link and others like it will be gone in the generated index.html file, causing several elements on my page to break graphically.
What settings in the webpack/Docker config could cause this to happen?
I have found the solution - it seems that my Dockerfile included a copy of the src and resources folders for the working directory, but not the public folder which contained the favicon as well as the base index.html. This meant that the index.html that was autogenerated as part of npm run build would never take the above lines of code into account.
I am trying to put an icon next to my page title. I have read quite a few articles and similar questions on the internet but i still can't see my little icon up there next to the page title. I literally don't know what is wrong with my code.
I have the following directories among other: data/public, data/files, public (which includes all my css files), views (which includes all my ejs files). Inside the /views folder i have a few folders and a few files that are responsible for my viewing experience while using the web app i am building. Now in the /views/includes directory i have a file named head.ejs which contains all my head code i will use in pretty much every other ejs file. so i just have the head.ejs file and i can include it in every ejs file i want. The head.ejs file looks like that:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="shortcut icon" href="/data/public/boxTitle.jpg" type="image/jpg" /> -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css">
I expected to see the icon up there but still haven't seen it. I have tried to move my favicon.ico image around in different directories and play a bit around with the paths. the best for me is for the image to be in the /data/public/ directory. while the head.ejs is in the /views/includes/ directory. The image is 16x16, black and white. Tried with a jpg image, too. I am probably failing really hard cause it's seems pretty easy and straight forward but... Any help is appreciated! I will delete the post if the answer is totally obvious and the post is worthless.
Assuming your icon is in your public folder inside an images folder.
If you have defined your public folder as you mentioned, with something like this:
app.use(express.static(path.join(__dirname, 'public')));
then you can easily display your icon this way:
<link rel="icon" href="/images/your-icon" type="image/x-icon" />
I have this following file structure:
mysite/
├── css/
│ ├── style.css
│
├── index.html
And my html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Home </title>
</head>
But when I run the site on the localhost (xampp), it is not taking the CSS.
For as long as I know, I have been doing this all the time but its not working this time.
FYI: My Apache in xampp is indeed running.
Can anyone spot my mistake?
try this,
<link rel="stylesheet" href="./css/style.css" type="text/css">
I am assuming that you have a css folder and index.html file in your mysite folder.
In order to get the css file, you wil have to use above format, which tells index.html file to go to css folder and get style.css file
try to put ../css/style.css to go back, your html file isn't in the same directory with the css one.
Check the network tab inside the developer console and see if it indeed loads. Also, try doing
style.css?random=number
Dev console: F12 in FF, CTRL+SHIFT+I on chrome.
I would like to use Font Awesome locally without using the cdn.
My code fails to add font awesome icons to my page.
I can make it work easily using the cdn link but the local link fails to do anything.
Thanks
Jason.
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<meta name="author" content="">
<title>How it Works | Rubberdesk </title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font-Awesome CSS -->
<link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
Writing this may be helpful for someone like me :
Actual folder of font-awesome.min.css is public/css/font-awesome.min.css
In font-awesome.min.css file font-family source refers to URL *'../fonts/fontawesome-webfont.eot'. So following files must be located in public/fonts/
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
What you have to do when you use bootstrap/font-awesome files locally is:
Path stored must be clear.
Path written inside the font-awesome.min.css should equal to (1)
Version must have the same.
the fonts in folder fonts/ are indeed related to font-awesome.min.css you've got right now.
you must know how to write it on your script, as in; <span class="fa fa-home"></span>, etc.
use all.css ,not fontawesome-min.css.
ref to : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Check the path is right and placed in right folder
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<meta name="author" content="">
<title>How it Works | Rubberdesk </title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font-Awesome CSS -->
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
check path
check path in bootstrap.min.css
are all same
It will look same as in question try this
You need to link to the all.css file or the all.min.css file for font-awesome to work locally on your pc and make sure you copy the webfonts folder to the font-awesome folder.
Here is an update for version 5.8.1. As mentioned above you need to download the font files locally in order to run font Awesome locally.
The folder to use is now called /webfonts
Download these files locally and put them in a folder called /webfonts.
Example: (https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot)
The css is referencing the following URL's.
../webfonts/fa-brands-400.eot
../webfonts/fa-brands-400.woff2
../webfonts/fa-brands-400.woff
../webfonts/fa-brands-400.ttf
../webfonts/fa-brands-400.svg
../webfonts/fa-regular-400.eot
../webfonts/fa-regular-400.woff2
../webfonts/fa-regular-400.woff
../webfonts/fa-regular-400.ttf
../webfonts/fa-regular-400.svg
../webfonts/fa-solid-900.eot
../webfonts/fa-solid-900.woff2
../webfonts/fa-solid-900.woff
../webfonts/fa-solid-900.ttf
../webfonts/fa-solid-900.svg
Total size is around 2.5 MB for all the font files.
I tried to implement serving font-awesome.min.css in my Django project.
Issue 1.
My first problem was how to serve the font files themselves. Initially the browser would come up with error (of font files not being accessible).
However the browser errors themselves were quite revealing:
Hovering the mouse pointer on the error lines would throw the following:
"..../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0"
So this solved my first problem as to where the font files should reside. It's telling me to put them in the sub-folder "fonts" in the static folder created (defined in the "settings.py" file like this):
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And the following in "urlpatterns" (in the project's urls.py file):
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
So the path of the .css file and the associated fonts would be something like this:
project_root
------ static
-------app_name
--------css
----------font-awesome.min.css
--------fonts
----------<font_files>
Next was the problem of font files themselves.
Issue 2: Where are the font files?
Initially I downloaded the font file by following the CDN path in by the browser (i.e. the css file itself along with the associated files which also included the folder named "webfonts"). But even after the folder was copied to the "fonts" folder the fonts were not served up and browser continued to generate errors.
In the ".css" file the font files are referred to but the referenced files/paths themselves were not available in the "webfonts" folder (as also confirmed by the browser error as stated above ("..../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0").
On searching the web for "fontawesome-webfont.woff2" I came across the site which had the files listed for download:
fontawesome-webfont.eot
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf
Once the files (s.no. 1 - 5 above) were copied in the folder "fonts" the fonts were served up successfully and as desired.
Thanks for all of your help everyone.
It looks like it was an "fa fa-icon" class issue. I thought I had them in there but they must have been lost during editing - probably due to poor version control.
I think I've been using some 3.x.x code by mistake.
Interesting that everything still worked using the cdn code.
Thanks again. Should be able to fix everything now.
Jason.
I had the same issue on Mac OS. My solution was to
sudo chown -R _www:staff project/
I'm kind of a newbie to html and definitely to CSS. I'm learning from the book Foundation Website Creation with CSS, XHTML, and JavaScript, which I understand is old at the time of this question, but still hoping I can help many. Here is my markup:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="C:\Users\Kevin Turner\Desktop\html\indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Why isn't my stylesheet linking? Am I allowed to make this link? What should I do? I believe it's working in Chrome, but not in IE or Firefox, perhaps you could help me understand this also.
Thanks,
Kevin
Don't use C:\Users\Kevin Turner\Desktop\html\indexcss.css. This is not a correct URL. Usually you'd use a relative URL path. If your the file including the css is in the same directory, just write the filename.
This should work if the file is in the same directory (folder) as your html-file:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
To explain what a relative URL path is, imagine you've got a folder structure like this:
--- html/
----- index.html
----- css/
------- maincss.css
and you want to include the maincss.css-file in your index.html. Then you'd do
<link rel="stylesheet" type="text/css" href="css/maincss.css" />. Because maincss.css is in the css/ directory (folder), which is relative to the directory you're in (html/).
You can use file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css
Source. But ONLY if the css-file is located on the computer that you are loading the page on!
So. if the CSS-file is in the same directory as the file including it (probably index.html), your code would be:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
And the other, with the file:/// URI and the file is located on the computer loading the html-page, would look like
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Standard CSS link declaration goes something like this:
<head>
<link rel = "stylesheet" type = "text/css" href = "cssdoc.css">
</head
There is probably something wrong with the path you entered. In the future, consider having both the HTML doc that you're editing. and the CSS document on desktop(or just in the same folder). that way you don't have to type in the full path every time (assuming you're just using a simple Notepad-like editor)
Before the your local URL type file:///
You shouldn't link to a local file because on your live website this won't work. Even if your filesystem is set up the same way, the HTTP server probably won't serve it. It also depends on how your HTML is being served locally (by a server or just with files).
Anyway, you should link to the CSS file relative to the html file or preferably the document root (the folder that is serving your website files). If you can figure out your document root, you could use:
<link href="/indexcss.css">
...assuming that your document root is at something like
C:\Users\Kevin Turner\Desktop\html\
If your html file (with the <head>) is in the same folder as indexcss.css, you can just use
<link href="indexcss.css">
Make sure that you understand the document root and relative/absolute paths.
As your file is stored locally, make sure you use the file:/// URI scheme:
<link rel="stylesheet" type="text/css" href="file:///C:\Users\Kevin Turner\Desktop\html\indexcss.css" />
Still not working?
Some (or most?) browsers block access to your local file system, even when the webpage itself runs locally. This is a security measure to prevent webpages from accessing and modifying your local files.
Chrome, for instance, will return an error saying something like Not allowed to load local resource. To fix this on Windows, you have to launch Chrome with the --allow-file-access-from-files flag. Simply close Chrome, right click and modify the shortcut, add the flag at the end of the shortcut target. So your target would be something like this: C:\path\to\chrome\chrome.exe --allow-file-access-from-files. This will allow Chrome to access your local stylesheets.