In my ASP.NET Web Forms project, i am using bundling and minification. I want to use Fontawesome CDN with fallback support but problem is that only CDN is working and as a fallback my downloaded local Fontawesome is not working.
I am using StyleBundleFallback
for stylebundle cdn fallback.
I have checked that i am referencing fontawesome correctly.
Although Bootstrap 5 is working fine but only fontawesome is not working.
Here is my code:
bundles.Add(new StyleBundle("~/webfont", fontico)
.IncludeFallback("~/Content/font-awesome/css/all.css", "sr-only", "width",
"1px"));
Above code is working fine because it is using correct cdn url. You can try to modify this url to make a fallback so that it should use local fontawesome file but it is not working.
As far as I know, this works the other way around. i.e. tries the CDN first, fails to a local version of the library if the CDN isn't available.
Related
I am converting an Astro app to Sveltekit that's hosted on Cloudflare pages. The local dev and builds work fine however on deploy the Tailwind styling isn't applying. The classes are in the html but without any css actually applied.
Loading module from “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js”.
The above picture is the console output on the deployment. I have my personal website hosted with Sveltekit on Cloudflare Pages and didn't have any problems. So the possible reasons I can think of is that this app is a monorepo app but the app works fine just has no css. Although I think there's some issue with reaching the app.css file.
Some other points that might matter
I have vitest and playwright set up from the initial project creation but there's no tests actually made for them.
I'm using the #sveltejs/cloudflare-adapter. I am also using +page.server.ts files to load data but I don't see why that would affect the styling
Any help would be great thanks!
I ran into the same issue today on an existing project. I bumped down the package version of the Cloudflare adapter:
"#sveltejs/adapter-cloudflare": "^1.1.0"
This solved it for me.
I have an application developed in .net MVC and using "SourceSansPro" font.
Imported google font into css as. This is first statement of css file
#import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
When I run this on local, font are loading correctly but after publishing on Azure,looks like they are not loading.
After inspecting the font on Azure app, font is getting applied but the size is bigger than what it looks on local however all css classes and properties applied are same.
What Tried -
Tried by embedding font in solution directory as well, removed cdn and used embedded fonts. Made required changes for MIME types in web config as below
Tried by disabling bundling
Can you please guide, where am I doing wrong?
We wanted to use cdn itself and not embedded font
I've got a vagrant environment where I do some Drupal 7 development and I wanted to remove some unused CSS. So, I hit the record button and started loading pages. JavaScript files were picked up fine. And so were some external CSS files. But, it would not find any CSS.
I thought perhaps it was because of Drupal 7's practice of adding a query string to the end of its CSS and JS files, so I stopped Drupal from doing that. But still, it's not finding the CSS files. Any ideas why it wouldn't?
Drupal 7 uses #import rule to include css files. It was workaround for old IE browsers, which didn't allow to include more than 31 linked stylesheets. It looks like Google Chrome Coverage tool doesn't work properly with #import-ed stylesheets.
But there is a Drupal module Link CSS. It allows to include css using <link> tag instead #import. So, if you install and enable it, Coverage tool will work as expected at your Drupal 7 site.
I have an HTML page which references a number of stylesheets. Most of the stylesheets are "local" to the website. I have one stylesheet, however, that I reference from a CDN. It's the Font-Awesome css file. My reference is as follows:
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
I reference the styles from this css file in several places across my application and an example reference is:
<span class="fa fa-pencil cursor-pointer margin-left-5" ng-click=\'openRoomEdit(dataItem)\'></span>
These references work fine everywhere except on Chromebooks. I have tested it on Edge, Firefox and Chrome on Windows and Safari and Chrome on Macs. It works on every single one of those of those examples. However, on Chromebooks, it can't find the styles from that CSS and so the icons do not render.
On Chromebooks only, I'm getting a net::ERR_INSECURE_RESPONSE in the Network panel when it tries to load the CSS file from the CDN. I'm referencing the file using https, from an app that runs as https with a valid SSL cert.
When I install the Font-Awesome files local to the application and reference it that way, everything works fine. I would prefer to be able to reference it via a CDN, but since many of my clients use Chromebooks, I need to figure out why this doesn't work.
To be sure the issue does not rely in the specific SSL BootstrapCDN is using, you should try using this one instead has a first step.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
cdnjs and BoostrapCDN are both using SHA-256, but BootstrapCDN is using a Symantec that has been generated on October 2016 and it makes me think of this bug in Chrome 53 where Symantec certificates were automatically rejected. I dunno if you can control the versions of Chrome your clients and you are using, but it might be a lead if they are not up-to-date.
Also what kind of certificate are you using for you own website? Is it trusted? It not, you can use LetsEncrypt to create one trusted by most CAs. There has been issues in the past about self-signed certificates and Chrome you can find at tickets #516808 and #516808.
If nothing helps, you may want to do a NetLog dump so we have more info about your issue.
I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.