I replaced all of the files in images/touch with my own logo, and also replaced favicon.ico in the main directory of my project, but the favicon still displays as the default asterisk that comes with web starter kit. I tried refreshing the cache of my browser, and adding in
<link rel="shortcut icon" href="http://mywebsite.com/app/favicon.ico?v=2" />
to try and manually link the favicon. This works, only when
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
is also commented out. But this will change the behavior of chrome for Android so that it is incorrect. Also, "images/touch/chrome-touch-icon-192x192.png" has been replaced with MY icon now, so why does this line make the favicon revert back?
I have the same problem after I replace following files with my own image:
/app/favicon.ico
/app/images/touch/apple-touch-icon.png
/app/images/touch/chrome-touch-icon-192x192.png
/app/images/touch/icon-128x128.png
/app/images/touch/ms-icon-144x144.png
/app/images/touch/ms-touch-icon-144x144-precomposed.png
Problem was solved when I close and open again my browser.
Related
Okay here's my problem:
My website:
https://www.bffmatch.com/
If I go to a subdirectory that is in my website root it shows index page without any css which is very weird:
https://www.bffmatch.com/css/
And if i go to a file it shows that file:
https://www.bffmatch.com/css/match.css
The same goes for php files and whatnot
So how can i disable access to these and just redirect to my website root or something
Thanks!
The problem is here:
<link rel="stylesheet" href="css/homepage.css">
css/homepage.css is a relative path.
The browser uses the URL of the current page to make a full URL out of it.
The URL of the current page ishttps://www.bffmatch.com/css/. This makes css/homepage.css to be expanded https://www.bffmatch.com/css/css/homepage.css and it does not exist.
Use full paths for the resources and it will work:
<link rel="stylesheet" href="/index.css">
<link rel="stylesheet" href="/css/homepage.css">
<link rel="stylesheet" href="/css/profile.css">
<link rel="stylesheet" href="/css/match.css">
And so on.
Use your browser's Web Developer Tools to find out other requests that cannot be found (the server's response for them is 404 Not Found).
I have built a small node server using express and I want to serve index.html which contains angular app. How ever the browser sends GET request for favicon.ico. I have installed serve-favicon, however still it looks for physical file. Is there a way to override it? or from where can I find such file
The recommended way is actually just to use a link tag in your index.html:
<link rel="icon" href="/img/favicon.png">
Just change the href to link to an img in your public folder and you're good to go.
http://www.w3.org/2005/10/howto-favicon
You can use this site to get free favicon.ico
Then add your favorite favicon.ico to your html .
<link rel="icon" type="image/png" href="../images/favicon.ico" />
I am using Orchard v.1.9.1.0.
I have my custom theme with a layout page that starts off like this:
#using Orchard.UI.Resources;
#{
Script.Require("ShapesBase");
// css
Style.Include("//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css");
Style.Include("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
}
Using Script.Include, I thought loading the CDN reference would work, but when building the project and viewing it locally, the reference is not there and instead renders like this:
<link href="/Themes/HotToddy5K/Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Why does Orchard do this? I can't seem to find where in the base/core it's applying this. I tried to delete that bootstrap.min.css file in that "scripts" folder, hoping it would then fall back to my CDN reference, but no luck.
Any ideas?
You can easily do this on your ResourceManifest.cs.
Actually it is better, because you can provide fallbacks as for debugging files. you can manage this feature from the Settings section in the Admin.
Where is says "Resource Mode", in 1.9x you can trigger the CDN too.
I use Script/Style.Require instead of Include as it gives me more control. it also maintains your script/style dependencies.
Basically I got the following HTML:
<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>
Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:
Looking into this, I realized that when accessing my website locally the browser would attempt to load the file:
/Content/fonts/glyphicons-halflings-regular.woff (which it did successfully)
while when online (on azure) it would attempt to load at:
/fonts/glyphicons-halflings-regular.woff
Why does it not put the /Content prefix that it does locally.
I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.
Also I'm bundling the content the following way:
bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
"~/Content/bootstrap/bootstrap.css"));
And the file structure looks the following:
Also bootstrap is looking for the files like this:
url('../fonts/glyphicons-halflings-regular.woff')
So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.
We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.
In our case, we had the following directory structure:
and modern.css was referencing fonts like
../fonts/iconFont.eot
and we were bundling the css file like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.
Long story short, we ended up changing the bundle name:
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Once the bundle name was changed, things started working properly.
Changing the path does work but the 'answered question' missed one vital point.
If you're using _Layout.cshtml that references the bundle, this will no longer work locally and on Azure.
You need to update the _Layout.cshtml page too!
So if you change your bundles path from Content/css to Scripts/css then you need to change _Layout.cshtml to #Styles.Render("~/Scripts/css") respetively.
Encountered this error with ASP.NET Core 2.0 MVC web app when publishing to Azure Web Service.
I had my stylesheets within the following code.
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
Simply copying and pasting the links into any environment besides Development worked
<environment exclude="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
/>
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
If you have downloaded a theme.zip or theme.rar that includes the bootstrap icons, before you extract do this:
right click on the compressed package
check the box "unblock" if it is visible
For icons to work- i had to set the folder permissions to "everyone = read" on the folder that the image was in
Using h:outputStylesheet I can embed CSS resources in the HTML head section, but how can I build a <link> for a favicon image resource which renders HTML like in this example:
HTML output:
<head>
...
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>
The image resource is located in <web>/resources/images.
If I use direct HTML code in the JSF template like href="/resources/images/favicon.png" the resource is not found - navigating to /resources/images/favicon.png leads to the error
/resources/images/favicon.png/index.jsf
not found
(I have set index.jsf as index page in web.xml which might explain this path)
Your webapp is apparently running on a non-empty context path. The leading slash / brings you to the domain root. Use #{request.contextPath} to dynamically inline the context path.
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
(note that I fixed the rel as well to make it crossbrowser compatible)
The href="/resources/images/favicon.png" is actually looking in the root direcotry of your server http://localhost/resources/images/favicon.png and not inside your web application directory.
Your href location will need to include the web application directory href="/webappname/resources/images/favicon.png" http://localhost/webappname/resources/images/favicon.png
If your .xhtml file is in the same directory as your resources folder then removing the forward slash at the being should work as well.
href="resources/images/favicon.png"