I have my Webfont downloaded: leaguegothic-condensed-regular-webfont
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:'League Gothic', "Condensed Regular";
}
It shows up in Google Chrome and Firefox however, it is using some sort of default fallback font when displaying in Safari. What can I do to resolve this?
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 worked with React Native about a year ago, and since then many things have very apparently changed. Installing module used to be simple, but now I can't seem to install anything without completely breaking the project permanently. I create a new project under Expo XDE and title it. After its creation I ensure it works properly by loading it on IOS and get the typical "Welcome and open App.js". So far, so good. Then I wish to install, for example, a drawer component. So I go to JS.coach and choose a module I see fit(https://js.coach/react-native-drawer-layout?search=drawer&collection=React+Native). After this I do the very first thing it says to do,
After running the NPM install its apparent it uninstalls about 700 packages and I assume this is where everything breaks. But I cannot figure out what to do past this or how to fix it. I have ran NPM install react-native after this and also have tried using the yarn package manager only for the same result. Is this due to my project setup or due to firewall settings within NPM? Either way I know it shouldn't be this hard to add a module, therefore, I know I must be majorly overlooking something. (I know the cmd screenshot uses a different package, just for show across different packages)
What confused me however, is the fact that it seems to say there is an issue with the tunneler and it refusing to connect.
<!doctype html5>
<html>
<head>
<style type="text/css">
strong { font-weight: bold; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; }
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
</style>
<style type="text/css">
body { background-color: #f5f5f5; }
.container { width: 500px; margin: auto; color: #444; padding: 5px; }
a, strong { color: purple; text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { text-align: center; color: #000; }
p { line-height: 20px; }
</style>
</head>
<body>
<div class="container">
<h2>Failed to complete tunnel connection</h2>
<hr />
<p>
The connection to <strong>http://packager.ak-gj5.ae.rf-ink.exp.direct</strong>
was successfully tunneled to your ngrok client,
but the client failed to establish a connection to
the local address <strong>localhost:19001</strong>.
</p>
<p>
Make sure that a web service is running on
<strong>localhost:19001</strong> and that it is a valid address.
</p>
<p>
The error encountered was: <strong style="color: #9E2929">dial tcp [::1]:19001: connectex: No connection could be made because the target machine actively refused it.</strong>
</p>
</div>
</body>
</html>
ABI23_0_0RCTFBQuickPerformanceLoggerConfigureHooks
ABI24_0_0RCTFBQuickPerformanceLoggerConfigureHooks
<redacted>
<redacted>
<redacted>
<redacted>
<redacted>
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent
<redacted>
Does anyone understand what I am doing wrong?
node -v
v8.9.3
npm -v
5.5.1
"expo": "^24.0.0",
"react": "16.0.0",
Try not going through Expo, but create a project that has both the iOS and Android projects.
Use yarn add instead of npm install. I'm not 100% with react-native but creating React apps with create-react-app had similar issues and I got around that by using yarn add
I'm developing an App using Ionic 2. Right now, I've this style:
ion-content {
background-image: url('/assets/images/orange-background.svg');
background-repeat: no-repeat;
background-size: 101%;
}
When I ionic serve this works fine, but when I upload a new version to Ionic View channel, this example doesn't work neither any example of background-image with an .svg.
I already tried Ionic - svg does not appear but didn't work.
Thanks in advance.
Edit 1
I already tried this url in background-image:
assets/images/orange-background.svg
/assets/images/orange-background.svg
../assets/images/orange-background.svg
./assets/images/orange-background.svg
None of this worked :'(
Edit 2
I just discovered that this problem only happens on iOS.
Maybe the url is incorrect. In the .css files: url ('../assets/images/orange-background.svg').
In other case, did you make the difference: In Whindows an image.SVG will works when you test the app in a browser but wont in Linux (Also Android). It seems that an image.SVG is the same as image.svg in windows.
I had a similar problem, and I realized that the file was called "Background.svg", and on my css I had:
background-image: url("../assets/imgs/background.svg");
Once I changed the file name to "background.svg" the problem was fixed.
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.
Using Jekyll 2.5.3, I've tried to set default values in _config.yml (I'm just playing around to get a feel for it right now). I'm trying to set a default layout right now on a site I'm serving locally. I have set --watch and that's working fine. When I set any YAML defaults in _config.yml, Jekyll does not apply the defaults at all.
Here's the config file I'm currently using:
name: jekyll test
description: test server
url: "http://localhost:4000"
markdown: rdiscount
permalink: pretty
defaults:
-
scope:
path: ""
values:
layout: "default"
The default layout is not applied to any page. I've tried with the title as well, with the same result.
My index.md:
---
title: index
----
{{ page.title }}
My default.html:
<style>
body {
background-color: black;
color: white;
font-family: "Helvetica", Arial, sans-serif;
}
</style>
<body>
{{ content }}
</body>
The default layout works fine when put into the YAML Front Matter of the index page itself, the main reason I'm looking for this is so I can apply default.html to 404 pages. The other elements in config.yml aren't giving me any trouble. Is there something I've done wrong?
Fixed it myself - --watch does not listen for changes to files that aren't included in the site itself (namely _config.yml, which is used to generate pages at runtime). To apply changes to the site configuration, I just had to restart Jekyll and feel a little stupid.
Bottom line: I have learned my lesson. If changes don't appear to be saving, turn it off and on again before asking.
I had this issue. There was an extra space after toggling a comment '#' tag in the frontmatter of my index.md:
---
#title: index
title: index2
----
and I fixed it by removing the space:
---
#title: index
title: index2
----