Is there anyway to add favicon [GIF & ICO] through CSS or I need to add the tag in every HTML pages ?
The favicon can not be defined in CSS. If you want reliable behaviour, you should use the HTML tags.
Browsers will usually automatically look at /favicon.ico if an icon isn't defined in HTML. Putting an .ico file here will work in all browsers, but this won't work for other file types.
I am not sure about having the Icon in CSS but if you put the icon in the root folder of your site browsers will show the icon correctly. (As A ICO Format)
This has good information here http://en.wikipedia.org/wiki/Favicon
Related
I was playing with Path 2.0 flying menu (http://codepen.io/sparanoid/pen/nHAmi) earlier and realized once I remove the link style tag from the index.html and put them into css files to link back to the file, the web page doesn't work as it was before anymore.
The link tag I use is very standard:
<link rel="stylesheet" href="css/style.css" type="text/css"/>
This link tag replaces the second style tags in the example files. I searched online and there is no documentations about some condition when only the style tag could work.
I suspect that the reason might be prefixfree.js cannot interpret css files (but can interpret style tags). I wonder if that's the reason, how I can set up correct interpreter for prefixfree.js.
Try not to use prefixFree. It's a buggy plugin. It doesn't always work with webkit based browser such as Safari, Chrome, or Opera even when set up a remove server (and certainly do not work when using local files).
There are two reasons why this might break:
Browser can't download the file.
The order of style sheets matter.
Look into your browser's error log. If you see an error there, fix it.
If there is no error, then there is a problem with the order of the styles. Later styles overwrite earlier ones. Try to move the <link> element to see how that changes things or use your browser's developer tools to see which styles get applied.
Strangely, none of Bootstrap3 glyphicons are displaying in Chrome v31(displays a small square). But, works fine in FF v26, Opera v18, Safari v5.1 and IE v10. Also, works fine in Android 4.x - Chrome and FF.
Tested with simple code: <span class="glyphicon glyphicon-adjust"></span>
Please help. Thanks much in advance!
Environment: Windows 8.0
Rather than fix your problem, I prefer to teach you how to fix your own problem.
Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
Go to the Network tab. You may need to refresh the page to get useful stuff there.
Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.
I had the same problem. The easiest solution is to directly import the CSS from the hiperlink, do not download it:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
The problem is that the CSS use other relative paths to other files. Therefore, you can do 2 things:
1. Download all the relative paths.
2. You can simply use the hyperlink (easier).
It looks like this is a bug in WebKit, which has been reported here: https://bugs.webkit.org/show_bug.cgi?id=76152
Also, the creator of GlyphIcons says he is aware of this issue and will try to use different unicode values in the next release to get around this bug: https://twitter.com/glyphicons/status/423426740128854016
Note to readers: be sure to read #user2261073's comment and #Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
My .htaccess in /wp-content caused the error due to a file type restriction. After I added woff2 to the list of allowed file types everything works nicely again.
# Protect /Wp-Content/
Order deny,allow
Deny from all
<Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
Allow from all
</Files>
I had the same problem as you:
Go to your CSS folder.
Open the bootstrap.min.css file.
Search for glyphicon text in that.
You can find out its url address.
You should change the font folder name to fonts.
Go and enjoy your life. :)
When the font response header is "Content-Type:text/html; charset=UTF-8" the chrome v38+ will have problem to show the bootstrap glyphicons, it will resolve this if set response header as "Content-Type:application/font-woff"
You need to download bootstrap fonts folder, and in your bootstrap.min.css you can find path like ../fonts for glyphicon, you need to change this path to "fonts/" remove ../ if your fonts folder is within same bootstarp.min.css .
enjoy :)
I discovered that upon inspecting the CSS of bootstrap.min.css that the directory location for "fonts" had added spaces which meant that it was calling for files that don't exist because the file names don't have those spaces in them. For example, it was listed all the way through every one as
.. / fonts / glyphicons - halflings - regular.eot
when it should have been
.. /fonts/glyphicons-halflings-regular.eot
Once I deleted the spaces, re-uploaded the CSS, cleared the browser cache, and reloaded (F5 button) the glyphicons finally showed up. Prior to removing the extra spaces the only other option that worked for me was that given by Gines Hidalgo who suggested downloading the CSS through a hyperlink. But with the discovery that removing the extra spaces fixes the problem that option is no longer necessary.
Its mostly bootstrap versioning issue and simply I added below URL.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
Ensure that you have the fonts folder in your project besides the js, css and others.
If the fonts folder is in the project and the path in the bootstrap.min.css file is like this ../fonts/glyphicons ie the fonts folder not in the css folder, Then everything will work just fine. Thank you.
If it helps, using bootstrap.css instead of bootstrap.min.css fixed this issue for me.
Why won't Firefox see the link between the HTML and the CSS when I try to view in Aptana? I've emptied the cache in Firefox, checked that the files are in the same folder, double and triple checked the code structure and placement in the header on the html page and tried Safari as the preview browser. I'm working from the local drive. Firefox and Safari see and read the html page fine, but none of the CSS style attributes are "cascading".
Sounds frustrating but there's always a solution (I guess),
First of all, is the link to the css file correct?
Second, is the link inside the header? Placing the file in the body could influence the result.
Thrid, load the page in firefox, right click on the page and select view page source. Locate the link to your css file and check the absolute path from there (click it and see if your css file is actually there).
Maybe the syntax is wrong, try using href="./style.css" in the stylesheet link.
Hope this helps
Do CSS files get sent to brower for the browser to render the page, or are CSS files processed server side, with only the HTML page being sent to browser?
CSS is processed client-side by the browser. So yes, it is downloaded by the browser along with HTML, images, Javascript etc.
Yes, the CSS file is sent to the browser to render the page.
This image will help you to understand, where the CSS file gets downloaded to the client browser.
alt text http://www.lokalisointi.org/~magi/itmill/book/polish/book-pl/img/intro/firebug.png
You can use Firefox and the Firebug plugin to check this.
They are sent to browsers, along with JS files and other resources referenced in your HTML page. Of course, browser may never actually request these files (for example, if you disabled images display), but nothing gets applied server-side.
CSS files are sent to the browser as well (unless they are already cached client side)
CSS is processed by the browser, client-side.
Css behaves like html files, they get fetched by the browser and then the browser does all the rendering.
The same thing happens with image files and javascript. That is why you have different behaviors for different browsers, each browser interprets the css files as they want and that's why you have to tune up your css files for IE, Firefox, chrome, opera, etc...
The best way to make your css files work in almost all the browsers (apart from IE6) is writing the css file using the w3c standards, Firefox, Chrome, opera and IE9 are supposed to be W3cCompliant.
Everything is sent to the browser what is supposed to design your page including CSS, HTML, Javascript.
I am able to use favicons if I copy one from another site and test. But my own doesn't work in IE8/Chrome. Mine is a 32x32 24bit icon created by Visual Studio. I always seem to have problems getting icons working right, what should I use? I thought I could have images up to 64x64...
See this site for instructions for creating a favicon.ico - it needs to be 16*16, not 32*32 (though you can have a composite .ico with both sizes).
I have created composite .ico files with several sizes, so they appear correctly on the browser and the desktop.
First, just to be safe, convert your original icon to an .ico using this converter.
Then, for cross-browser compatibility (specifically Internet Explorer), use:
<link rel="shortcut icon" href="http://www.yoursite.com/youricon.ico" />
Most browsers are smart enough to use any PNG/ICO named favicon.ico located in the root of your site, but this is not always reliable.
The wikipedia page on favicon contains a lot of information.
The support for favicons differ a bit from browser to browser, and there is no guarantee that the favicon will work on any given system. Sometimes the browser just ignores it for no apparent reason.
To get the widest browser support, you should use the .ico format. There is a compatibility chart on the wikipedia page that tells you how widely supported each format is.
You need to use 16x16 .ico file. 32x32 .ico files and .png, .jpg files don't always work in browser title bars. Nowadays you might find some browsers support this but not every browser does this so try to stick to 16x16 .ico files.
I was facing the same issue, you just have to add some extra character,
example: if you have written C:\Users\Desktop\image\icon.ico for fetching the image then you just have to add ?v=2 like this
"C:\Users\Desktop\image\icon.ico?v=2".
or you can just change the format to .jpg, .png etc.