Could someone tell me how to resolve this below errors? I have download template from internet. tried to converting into angular 2 ponents. everything is okay, i can able to see the app running in my machine under localhost:4200. but i don't know why the following errors ing and no icons loading in app
in my index.html am having following url
<link href='' rel='stylesheet' >
<link href="+Icons" rel="stylesheet" >
in my meterialize.css
@font-face{
font-family:"Roboto";
src:local(Roboto Thin),
url("../fonts/roboto/Roboto-Thin.eot");
src:url("../fonts/roboto/Roboto-Thin.eot?#iefix")
format("embedded-opentype"),
url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Thin.woff") format("woff"),
url("../fonts/roboto/Roboto-Thin.ttf") format("truetype");font-weight:200;
}
@font-face{
font-family:"Roboto";
src:local(Roboto Light),
url("../fonts/roboto/Roboto-Light.eot");
src:url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Light.woff") format("woff"),
url("../fonts/roboto/Roboto-Light.ttf") format("truetype");
font-weight:300;
}
@font-face{
font-family:"Roboto";
src:local(Roboto Regular),
url("../fonts/roboto/Roboto-Regular.eot");
src:url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Regular.woff") format("woff"),
url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
font-weight:400;
}
@font-face{
font-family:"Roboto";
src:url("../fonts/roboto/Roboto-Medium.eot");
src:url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Medium.woff") format("woff"),
url("../fonts/roboto/Roboto-Medium.ttf") format("truetype");
font-weight:500;
}
@font-face{
font-family:"Roboto";
src:url("../fonts/roboto/Roboto-Bold.eot");
src:url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Bold.woff") format("woff"),
url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
font-weight:700;
}
@font-face{
font-family:"Material-Design-Icons";
src:url("../fonts/material-design-icons/Material-Design-Icons.eot?#iefix")
format("embedded-opentype"),
url("../fonts/material-design-icons/Material-Design-Icons.woff2") format("woff2"),
url("../fonts/material-design-icons/Material-Design-Icons.woff") format("woff"),
url("../fonts/material-design-icons/Material-Design-Icons.ttf") format("truetype"),
url("../fonts/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");font-weight:normal;font-style:normal;}
console error
materialize.min.js:6 GET http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
materialize.min.js:6 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff2 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
about:106 GET http://localhost:4200/assets/fonts/ionicons.woff?v=2.0.0 404 (Not Found)
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff 404 (Not Found)
aboutponent.ts:19 about {basicInfo: Array(1), exp: Array(1), prog_skills: Array(1), otherSkAndDevTools: Array(1), socialNwrk: Array(1)}
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.ttf 404 (Not Found)
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff2?v=4.5.0 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff?v=4.5.0 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.ttf?v=4.5.0 404 (Not Found)
i tried all possible solution from SO, but nothing helped me
Could someone tell me how to resolve this below errors? I have download template from internet. tried to converting into angular 2 ponents. everything is okay, i can able to see the app running in my machine under localhost:4200. but i don't know why the following errors ing and no icons loading in app
in my index.html am having following url
<link href='https://fonts.googleapis./css?family=Roboto' rel='stylesheet' >
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet" >
in my meterialize.css
@font-face{
font-family:"Roboto";
src:local(Roboto Thin),
url("../fonts/roboto/Roboto-Thin.eot");
src:url("../fonts/roboto/Roboto-Thin.eot?#iefix")
format("embedded-opentype"),
url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Thin.woff") format("woff"),
url("../fonts/roboto/Roboto-Thin.ttf") format("truetype");font-weight:200;
}
@font-face{
font-family:"Roboto";
src:local(Roboto Light),
url("../fonts/roboto/Roboto-Light.eot");
src:url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Light.woff") format("woff"),
url("../fonts/roboto/Roboto-Light.ttf") format("truetype");
font-weight:300;
}
@font-face{
font-family:"Roboto";
src:local(Roboto Regular),
url("../fonts/roboto/Roboto-Regular.eot");
src:url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Regular.woff") format("woff"),
url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
font-weight:400;
}
@font-face{
font-family:"Roboto";
src:url("../fonts/roboto/Roboto-Medium.eot");
src:url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Medium.woff") format("woff"),
url("../fonts/roboto/Roboto-Medium.ttf") format("truetype");
font-weight:500;
}
@font-face{
font-family:"Roboto";
src:url("../fonts/roboto/Roboto-Bold.eot");
src:url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Bold.woff") format("woff"),
url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
font-weight:700;
}
@font-face{
font-family:"Material-Design-Icons";
src:url("../fonts/material-design-icons/Material-Design-Icons.eot?#iefix")
format("embedded-opentype"),
url("../fonts/material-design-icons/Material-Design-Icons.woff2") format("woff2"),
url("../fonts/material-design-icons/Material-Design-Icons.woff") format("woff"),
url("../fonts/material-design-icons/Material-Design-Icons.ttf") format("truetype"),
url("../fonts/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");font-weight:normal;font-style:normal;}
console error
materialize.min.js:6 GET http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
materialize.min.js:6 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff2 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
about:106 GET http://localhost:4200/assets/fonts/ionicons.woff?v=2.0.0 404 (Not Found)
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff 404 (Not Found)
about.ponent.ts:19 about {basicInfo: Array(1), exp: Array(1), prog_skills: Array(1), otherSkAndDevTools: Array(1), socialNwrk: Array(1)}
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.ttf 404 (Not Found)
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff2?v=4.5.0 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff?v=4.5.0 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.ttf?v=4.5.0 404 (Not Found)
i tried all possible solution from SO, but nothing helped me
Share Improve this question edited Nov 17, 2021 at 8:27 Ignacio Ara 2,5802 gold badges27 silver badges37 bronze badges asked Apr 19, 2018 at 12:16 Mr. LearnerMr. Learner 1,0383 gold badges22 silver badges52 bronze badges2 Answers
Reset to default 3It is returning 404 error (Not found) for all fonts imported in CSS, you have to decide if you're going to use:
- Fonts from Google: imported in your HTML file.
- Fonts from local path, in project: defined in your CSS file.
You can bine them but you're showing both options, you need to decide it so that we can fix it.
Check if first URL in error: http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0]1 downloads a file or also returns error.
Probably the problem is with the path defined in CSS file, eg src:url("../fonts/roboto/Roboto-Medium.eot");.
finally I've resolved this after download the required dep files from github and put it in asset folder
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745118369a4612267.html
评论列表（0条）