I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons
Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.
Addtional Information
I am using Wampserver with apache(2.4.23)
I installed bootstrap.css with "npm install bootstrap"
This is what my font-face looks like
#font-face {
font-family: 'Glyphicons Halflings';
font-style: italic;
src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I try to call the glyphicons like this:
<i class="glyphicon glyphicon-chevron-left"></i>
Does anyone have any idea where this problem might be located?
Double check #font-face location path and also the mime type.
Related
I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there).
Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("../public/example.png");
}
You attempted to import example.png which falls outside of the project src/ directory
How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.
Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
Could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)
In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,
background-image: url("/images/background.jpg");
references:
https://github.com/facebook/create-react-app/issues/829
https://create-react-app.dev/docs/using-the-public-folder/
there is a special page about the /public folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/
Here is how you should refer to the public folder:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
or
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
BUT, you can't use those solution in a css file. So you'll have to precise the ressource from the js files:
const MyComp = () => {
return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}
I was using "public" folder but it says here to use images inside "src" folder:
https://create-react-app.dev/docs/using-the-public-folder/
"Normally we recommend importing stylesheets, images, and fonts from
JavaScript."
Remove the extra .. in the relative path. :)
Use "./image.png".
The logic behind is that the css file you will place the code in, will be part of index.html when the app is finished, built and deployed.
The only way that helped me is adding full URL-adress to the image path. So this one can help:
background-image: url("http://localhost:3000/background.jpg");
Using the URL directly doesn't work for my environment, for me I needed to specify the path TO the image FROM the current directory.
eg;
/src/styles/style.css
cursor: url("../../public/images/image.png"), auto;
/src/public/images/image.png
background-image: url("http:/images/pexels-photo-1.jpg");
I'm currently trying to a) add some non-standard fonts and b) the font-awsome icon library to my project. I've donwloaded the the newest version of FA 4.7.0 on their website.
My project structure is like this:
web
----resources
---- css
---- default.css
---- fonts
---- Raleway-Regular.ttf
---- Roboto-Regular.ttf
---- Questrial-Regular.ttf
---- Poppins-Regular.ttf
---- font-awesome-4.7.0
---- css
---- font-awesome.css
---- font-awesome.min.css
---- fonts
---- fontawesome-webfont.eot
---- fontawesome-webfont.woff
---- fontawesome-webfont.woff2
---- fontawesome-webfont.svg
---- fontawesome-webfont.ttf
---- js
---- default.js
Both fontawesome.css and my default.css file define fonts via #font-face.
Knowing that JSF cannot handle the fonts as a resource without the use of EL, I changed the code of the stylesheet:
font-awesome.css
#font-face {
font-family: 'FontAwesome';
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&v=4.7.0");
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff2']}&v=4.7.0") format('woff2'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff']}&v=4.7.0") format('woff'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.ttf']}&v=4.7.0") format('truetype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.svg']}&v=4.7.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
My css file is referencing the fonts as below:
#font-face {
font-family: Railway;
src: url("#{resource['fonts:Raleway-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Questrial;
src: url("#{resource['fonts/Questrial-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Poppins;
src: url("#{resource['fonts/Poppins-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: "Roboto";
src: url("#{resource['fonts:Roboto-Regular.ttf']}") format("truetype");
}
The fact that I'm using both the ":" and "/" seperator is to test which one's working... apparently none :)
I also added all necessarry MIME type mappings in my web.xml.
In the home.xhtml file, I use these resources like that:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<h:outputStylesheet library="font-awesome-4.7.0" name="css/font-awesome.css" />
<h:outputStylesheet name="css/default.css" />
<h:outputScript name="js/default.js" />
</h:head>
Now after all these configurations, it seems as if the resource handler is not able to load the fonts (my costum and the FA ones) as well as the JavaScript file. The interesting part is that all other styles of the css file are imported correctly. Also it's strange that it worked the exact same way when I booted the server for the first time today - after adding a favicon to the page, it didn't work anymore.
I'm getting notified of the following errors in my browser:
Uncaught TypeError: Cannot read property 'children' of null(…)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
I'd be grateful for any help
Server: Glassfish 4.1.1
Disappointing as this may sound, it was just my browser caching all resources.
After using Ctrl + F5, the browser reloaded the page and all according stylesheets
Generally it turned out to be beneficial to turn off the browser cache while doing web development :-).
Well, I'm using Brunch.io to replace the traditionnal Grunt.js. To perfom the build very fast, I've set on my brunch-config.coffee file, the "native" mode, and I've downloaded all the compass mixins
plugins:
sass:
mode: 'native'
I've not tryed all the compass-mixins, but everything seem's allright, except when I try to include web-font, so adding this on a _font.scss file for exemple :
#include font-face("oxy_reg",
font-files("oxygen-regular-webfont.eot",
"oxygen-regular-webfont.svg",
"oxygen-regular-webfont.ttf",
"oxygen-regular-webfont.woff"
));
result this on the generated css file :
#font-face {
font-family: "oxy_reg";
src: font-files("oxygen-regular-webfont.eot", "oxygen-regular-webfont.svg", "oxygen-regular-webfont.ttf", "oxygen-regular-webfont.woff"); }
but it's not a good css format, the right one (doing by ruby, when I set mode to "ruby" on the brunch-config.coffee) should be this :
#font-face {
font-family: "oxy_reg";
src: url('oxygen-regular-webfont.eot?1422206651') format('embedded-opentype'), url('oxygen-regular-webfont.svg?1422206651') format('svg'), url('oxygen-regular-webfont.ttf?1422206651') format('truetype'), url('oxygen-regular-webfont.woff?1422206651') format('woff'); }
well, I've got no error, but the generated script is not good !
Hope someone get a idea what I'm doing wrong !
see you
I am aware that this question is asked here but I have tried the solutions mentioned to no affect.
My CSS declration looks like:
#font-face {
font-family: gillsans;
src: url('gillsans.TTF');
}
This works in Chrome but not FireFox.
Weirdly enough, I have another site that uses the exact same declaration but with a different font and it works fine:
#font-face
{
font-family: bebas;
src: url('bebas.TTF');
}
Could this have something to do with the actual font file?
I have also tried modifying my .htaccess file as suggested:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Again no results in FireFox.
I have tried changing .TTF to .tff and providing absolute paths to the file, but still nothing.
Can anyone suggest something I can try?
The only possible thing could be is that this site is in development and is thus using a temporary URL, but I dont understand how that could effect it.
Try other font types like eot,woff & svg. To convert you can use http://www.onlinefontconverter.com/
and then try this code in your style or css file:
<style type="text/css">
#font-face {
font-family:'bebas';
src:url('bebas.eot');/*IE9 or later*/
src:local('bebas'),/*check for font installation*/
local('b ebas'),/*check for font installation in some browsers like Safari*/
url('bebas.eot?#iefix') format('embedded-opentype'),/*hack for IE8 or earlier*/
url('bebas.woff') format('woff'),/*new browsers*/
url('bebas.ttf') format('truetype'),/*all browsers excpet IE*/
url('bebas.svg#bebas') format('svg');/*old iOs*/
}
.bebas-ft{
font-family:bebas, Tahoma, Geneva, sans-serif;
}
</style>
And also do not modify your .htaccess file for such simple matter!
So I downloaded another version of Gill Sans (still ttf) and replaced the one I have it that fixed it. Weird.
I am trying to use a font from typefront.com. It works in every other browser but the security restrictions in Firefox don't allow using fonts from a different domain.
I've tried creating an .htaccess file and adding the following snippet of code but when I try to load the site I get an internal server error page!
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mydomain.com"
</IfModule>
</FilesMatch>
Here is my CSS code:
#font-face {
font-family: "Gravur-CondensedBold";
src: url("http://typefront.com/fonts/825589026.eot");
src: local("☺"),
url("http://typefront.com/fonts/825589026.woff") format("woff"),
url("http://typefront.com/fonts/825589026.ttf") format("truetype"),
url("http://typefront.com/fonts/825589026.svg") format("svg");
}
#font-face {
font-family: "Gravur-CondensedLight";
src: url("http://typefront.com/fonts/825589027.eot");
src: local("☺"),
url("http://typefront.com/fonts/825589027.woff") format("woff"),
url("http://typefront.com/fonts/825589027.ttf") format("truetype"),
url("http://typefront.com/fonts/825589027.svg") format("svg");
}
Can anybody help me with this?
here's the url: http://www.enjoythisyeah.com
Use a dataURI with a base64 encoded WOFF or SVG font to bypass the same-origin restriction for web fonts.