Font-awesome icons are missing

Question

I want to design a website using html5 and bootstrap.In, and to my html code, I need Font-Awesome icons. But when I put font-awesome.min.css and corresponding fonts, the Font-Awesome icons did not load in my page.

So when I inspect that page, I get the following errors and warning on my console:

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/regular.ttf  style.css:9:1
downloadable font: download failed (font-family: "Roboto" style:normal weight:300 stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/roboto-light.ttf  style.css:46:1

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/fonts/fontawesome-webfont.woff?v=4.2.0  font-awesome.min.css:4:14
downloadable font: download failed (font-family: "Open Sans" style:normal weight:bold stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Open%20Sans/OpenSans-Regular.ttf

How can I fix this issue?

Answer 1

Either address is wrong (or) configuration setting is missing

1. verify your address by checking it directly on the browser or simply put the source and refer the path.
2. refer this Downloadable font on firefox: bad URI or cross-site access not allowed

Answer 2

try to include font-awesome.css plugin not font-awesome.min.css because some time it shows error. When you are including this plugin in your html file include it above of all script files some time it also create a problem.

Answer 3

Make sure correct format is used with the fonts.

For me the Firefox gave error:

downloadable font: rejected by sanitizer (font-family: "opensans-semibold" style:normal weight:400 stretch:100 src index:1) source: <path-to-font>/OpenSans-SemiBold.svg

Upon checking the file the format provided in format() for svg was incorrect:

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("woff2");

So the format woff2 was provided for svg font which I corrected to:

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("svg");

And the problem was gone!

Answer 4

Either address is wrong (or) configuration setting is missing verify your address by checking it directly on the browser or simply put the source and refer the path. refer this Downloadable font on firefox: bad URI or cross-site access not allowed

Answer 5

if you just add this line of code

  <link href="fonts/fontawesome/all.min.css" rel="stylesheet"> 

inside of your page you just need go to the all.min.css and you can see there are some urls for fonts that you must inculde in your directory of your site.

Answer 6

可下载字体：下载失败（字体系列：“Font Awesome 6 Brands”样式：正常重量：400 拉伸：100 src 索引：0）：状态=2147746065 来源：请帮帮我