Something strange is happening and I can't figure out why: On my website I have the following CSS for providing Ionicons:
<link rel="stylesheet" href="https://www.domain.tld/themes/places/assets/fonts/ionicons/css/ionicons.min.css">
I decided to move them to CloudFront CDN, now the link looks like this:
<link rel="stylesheet" href="https://[...].cloudfront.net/assets/fonts/ionicons/css/ionicons.min.css">
The link is not broken, the same CSS are now accessible through the CDN, but the Ionicons are gone - I see empty rectangles only. When I change the link back to my server's local CSS file, the icons appear again. Everything else (CSS, JS, Images), which has been moved to the CDN, works as usual - only the Ionicons not. Does someone has an idea where this strange behaviour comes from?
Related
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
So I've been slowly trudging my way through a responsive eBay listing template using Bootstrap, it took some trial and error but I seem to have nailed everything down except the ability to use font-awesome in the listing.
The first attempt at a solution was to point to the font-awesome cdn for the css file which is supposed to include the necessary information to embed the font, but it did not work.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I read somewhere else where the link had http: in front, so I tried that, it also didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then I tried to point it all directly to my own server. So I put a full path to the css file on my server:
<link rel="stylesheet" href="http://www.lqskins.com/ebay/font-awesome/css/font-awesome.min.css">
Then I edited the css file directly in order to put the correct path to the font files themselves in the css file, example:
src:url('http://www.lqskins.com/ebay/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0')
None of these solutions have worked. If I pull up my test template on the server that points to the same css file, they work fine there. Is there a way to load font-awesome for use within an ebay listing, or is crippled beyond workability?
I am having no issues with this. The following code correctly displays a cog in my ebay listing.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-cogs"></i>
I have developed an application that is meant to be used offline. It is deployed with it's own, custom tailored, web server and uses default browser to connect to it.
Since it's offline, I also have fonts stored in filesystem, that are loaded with #font-face. Apparently, due to many styles and character sets, they take up some time before the browser load them.
I'm testing it with Chrome (latest), and the flash of unstyled text (FOUT) is really annoying.
How could I reduce the FOUT when working in local context?
How about hidding the entire html, or all of the text, before your css file is loaded?
At the top of your head you'll include inline styles likeso:
<head>
<style>html{visibility: hidden}</style>
<link rel="stylesheet" href="/static/default/style.css"/>
</head>
At the bottom of style.css, or after the #font-face declarations, you'll make the html visible again:
html {visibility: visible}
I included several CSS files in my website, other works good but one my CSS file (on localhost) :
<link href='http://127.0.0.1/ndf/nekib-css.css' rel='stylesheet' type='text/css'/>
loads as an image. Here's a screenshot of what I see in the Chrome Developer Tools.
Double checked the MIME-type, added it on different position but none work.
I am using WAMP.
Any idea what's wrong ?
You may be having an issue similar to the post below. Their issue came from having some non-standard css, in their case background:url()
Google Chrome Developer tools - CSS file showing as an image resource
Is it just me or does a site like:
http://www.infoq.com/news/2009/04/fubu-mvc
often load without a style, because the author put the stylesheet over on:
http://cdn1.infoq.com/styles/style.css
I know this is all trendy way to do css, image and javascript files now. But I seem to bump into this issue all the time. Is it only a Firefox issue?
I just saved the source locally and tested it out. It seems that when the styles do not appear, the LINK element is resolving as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn3.infoq.com/styles/style.css;jsessionid=2BAD2D184D56C3163ADC70B99E711F47" />
..the important part being the ';jsessionid....' which is knocking the css out of commission.
On a reload, that jsessionid apparently kicks into action for some reason, and the LINK element resolves normally as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn4.infoq.com/styles/style.css" />
I'm not sure what is actually causing the jsessionid to not work, then work on reload...but that seems to be the culprit in one way or another. Also, I had the same exact experience in IE7 and Safari...so definitely not a browser specific thing.
I believe the issue is because firefox checks for crossdomain.xml to see if the request is allowed, and IE just grabs it regardless.