My site doesn't seem to show the fonts from font awesome, even though I have included the css from cdn as shown here
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
There should be a icon beside "tenant info" and "landlord info" and few others but those are some that are not showing up.
The site looks fine running locally but does not on live.
UPDATE
Fixed, font folder was in the wrong spot
Found # https://fontawesomecdn.com
https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css
Use this Code in html-head:
<link rel="stylesheet"
href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css"
integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU"
crossorigin="anonymous">
Related
I've had a look at other solutions proposed to other similar questions on StackOverflow and I can't seem to get my favicon to display for my Rails page in Chrome (at least on the desktop, it works for Chrome on my iPad weirdly).
I've tried having it as an .ico, as a .png, and currently have it as a Base64 string as proposed in response to a similar question. All of these work in Firefox, but will not work in Chrome.
The page is deployed using Heroku, and the link href tag is in the head tag.
The page is at https://www.resnate.com.
EDIT: Code:
<head>
<meta property="og:title" content="Resnate: The Music Social Network." />
<meta property="og:description" content="Music, Gigs and Merch." />
<meta property="og:image" content="/assets/previewimg2-c6c3bbb488ce1d2360bb605f93adc8421afe44813c1de1e324aa008858dbba18.png" />
<title>Resnate: Music, Gigs, Merch.</title>
<link rel="stylesheet" media="screen" href="/assets/application.self-a2388fc8a11c59fee992af9cba7099a53de4bd515465610aa19c43a3b90054f6.css?body=1" data-turbolinks-track="true" />
<link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
<script src="https://js.pusher.com/2.2/pusher.min.js"></script>
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAACXZwQWcAAAAgAAAAIACH+pydAAAC8klEQVRYw+2XsWscRxSHv5nZ273bVRw43BrLcEIGkwgRY8g/YHDhwq3BpcvgwrhyYRUOuFGVMmXAJJCgQn+Cgw3BRpGNweJUyE5njLGk273bvZt5KeZ0J4WTtCffKY1fuey83zfvzbx5TzXv3JPO1lt0GIIAiulaX8MVBdXZ8wSdrbe0N5qoKEK6vSmre1OVAMlzAAIdhqgoQlermHrsI+DcFEIhoDUI2CzDAToMCRCQbg9Tj7n4y89U6nUIDEpNFkBEoGfpfvzIm1u3sbstEAgGG1UQfH0GjKHd3ERp46knE3TEWWqNhtfYrzn4xzlUFNFubvL6xk10NQKlPjsSIgIiuE7OpZXH1OYa/RR7GwLgxZQ26GqErtVwaYbNczgphAg6itBJ7BX0XmqH/oIRq0ApXJpx9sZ1znx/BZumoPSY4g6TJOw8+4sPK6tgNKNSGoxaq5TCFgUzi99Sv3YV6fVQQXCc5EH9/hrX6fD+tz8wcW3kf0d6FWsB2Fr6kWyjiUmSUuI2TYnn57jw8MHAx2F29Lb6Yc82Nmm9+BsVVrCt9NCDKSKYmQQpugzyfEzqSsXVJDEqrPDV4gIzl7/zVUz/B8IJKopoPX/B7to6pn/wjrPSiXVpRrLwDefu/jDyTOx9e/dome0/n5V1Wx5gb5fAyLyKtR7KjVe8xgPoh10Zc/it0OPVjDEv9+TtC8CXQ1gaQCcx6for/ln+6chClK6/Grx+EwOwaYYUXXbX1vn05GmpUmzTbAIA4huHeL4ByJiPUeOAjxMBKGMAmF26f6LneL+PsQBEBB2GtNZeoqvVz2pIWmsv0WHoW7NyAMq3UknMh5VV3v/6+0RaMtduM6rV3wcgiAjiLK7jhwaMLv2sHs4guHYb18kRZ/uRGEZjCKA1kufUGg0urTyeWlvur/AwncFAQ6C3vUOlXqc215jaYNLb3mG/ZoDys5rNMt7cun1qo5mqBH4wcUWB5DkO/Lh0CrY3nLqiIKjOngf438bzfwFHKVzQwuVyewAAAFl6VFh0U29mdHdhcmUAAHja88xNTE/1TUzPTM5WMNMz0rNQMDDVNzDXNzRSCDQ0U0jLzEm10i8tLtIvzkgsStX3RCjXNdMz0rPQT8lP1s/MS0mt0Msoyc0BAK1OGKx0FS5rAAAAIXpUWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzAAB42jMEAAAyADIMEuKEAAAAInpUWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAAeNozNLIwAgACAADOvq1X/gAAACF6VFh0VGh1bWI6OkltYWdlOjpXaWR0aAAAeNozNLIwAQACAgDQ2j98IAAAACJ6VFh0VGh1bWI6Ok1pbWV0eXBlAAB42svMTUxP1S/ISwcAEXsDeF85R+IAAAAgelRYdFRodW1iOjpNVGltZQAAeNozNLY0NjcyNTI3BAALOQIJ9tf2MgAAABl6VFh0VGh1bWI6OlNpemUAAHjaM7LMTgIAAq8BOcs8cVIAAAAcelRYdFRodW1iOjpVUkkAAHjaS8vMSbXS19cHAAyaAmiUQFGqAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="nM46FYSVzSqJFGHsAMGU/IrPXSNExiq25L5Q7vJp2ZP+f3uj1u9isqrpgNna/mAl1X0eABdwsP6YYt8qzgDHTA==" />
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I know this question is two years old now, but as I have been struggling with this exact problem for 3+ hours surfing the net without finding a solution to my case (I was doing everything people suggested in all its flavors) and I have just suddenly make it work, I think I'm going to post my experience just in case I can save the pain to the next victim.
My setup was exactly the same as OP's: Rails app with a favicon displaying in every single browser but Chrome. I tried to follow #toddmetheny answer without success.
It turns out that as this app I'm working in loads a whole lot of scripts inside <head>, where you place the favicon <link> tags becomes important. I don't really know why this happens (would be much appreciated if someone could either confirm or destroy my theory), but I guess that while Chrome is loading those scripts, as it has not yet found any <link> tag referencing a favicon, it requests the default /favicon.ico. I noticed this while looking at the Network tab: Chrome always requested /favicon.ico while the other browsers requested the one referenced in the <link> tag as expected.
I don't know if this might have been the cause to OP's problem (as I see he loads some scripts too), but the solution was as simple as moving the favicon_link_tag block to the top of <head>, just after <meta> tags.
Hope this helps some desperate folks out there!
Try using the rails helper favicon_link_tag.
Make sure your icon is saved in app/assets/images. Clear your browser cache to ensure you're using the latest.
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.
How to get favicon website with Chromium Embedded Framework? I could look at the source code and get the url of the icon, but some sites, like Facebook, do not use a standard procedure to add a favicon, then, how do I get the favicon? Thanks.
The rules for the favicon are all explained on the Wikipedia page.
The standards use a link element with a rel attribute in the <head> section of the document to specify the file format, file name and a location can be specified for any Web site directory.
You need to look, inside the <head> element, for link elements of this form:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
or
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
If you don't find such links, then use the fall back of looking for favicon.ico at the root directory.
I'm not certain why you think that Facebook don't follow the standard. I just looked at an FB page which contained this:
<link rel="shortcut icon"
href="http://static.ak.fbcdn.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico" />
It's not possible for websites to use some other mechanism to get favicons to browsers. The browsers follow the well-defined rules for getting favicons. If a website did something different, the browser would not find the favicon.
From this blog entry, the best practice for cross-browser supported favicons is to include
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico"> <!-- For good browsers. -->
<link rel="SHORTCUT ICON" href="http://www.example.com/image.ico"/> <!-- For Internet Explorer-->
The first link is for real browsers and the second is for ie rubbish. On some websites you will see type="image/x-icon" in the link tag. There was a time when this was the correct implementation, but image/x-icon has now been superceded by image/vnd.microsoft.icon which is now part of the IANA standard for MIME types.
By the way, older versions of ie just looked for a file name /favicon.ico which was hard-coded. If you wanted to be ultra safe, you should name your favicon as favicon.ico. Of course that does not help you if your domain hosts multiple web-sites for different purposes.
Note: If you don't need to support favicons for IE, then you are then free to use png, gif and jpg formats for your favicon, as indicated below...
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
CEF1 has a callback named OnFaviconURLChange that's called whenever the favicon URL for a page changes. CEF3 doesn't support this callback yet, according to this bug in the CEF issue tracker.
You need to implement a client handler and at least CefDisplayHandler. This class have the OnFaviconURLChange (not sure in what version did appear, but for sure is present in branch 2357 and later).
C++ prototype is:
void OnFaviconURLChange(CefRefPtr<CefBrowser> browser,
const std::vector<CefString>& icon_urls);
icon_urls usually contains a single entry (if any), which is the URL of the favicon.
Consider also checking the favicon URL for its security, I passed the URL to a HTMLayout application only to discover that was on a self-signed https:// resource and all sorts of wininet security error (InternetErrorDlg for example) started throwing all the place.
I'm developing a new webapp based on the orbeon samples. I'm using orbeon 3.9 CE. I got VERY ERRATIC behavior when I use custom ressources. They are placed in following folders :
/orbeon/WEB-INF/resources/config/theme/*.css
/orbeon/WEB-INF/resources/config/theme/*.js
/orbeon/WEB-INF/resources/config/theme/images/*.jpg
In my custom theme file (/orbeon/WEB-INF/resources/config/theme-xnotes.xsl), they are linked like this (a few examples) :
<xhtml:link rel="stylesheet" href="/config/theme/bootstrap.css" type="text/css" media="all"/>
<xhtml:script src="/config/theme/bootstrap.js"/>
<xhtml:link rel="icon" href="/config/theme/images/icone_grue.png" type="image/png"/>
When I point my browser at the application (http://localhost:8080/orbeon), it SOMETIMES work, SOMETIMES doesn't (css are ignored, page transitions are wrong) and SOMETIMES it works partially (css are ok, js not, a few images are ok, others are not and so on)
When I look at the page source code, the links seems to be ok, to take the sames examples as above :
<link rel="stylesheet" href="/orbeon/config/theme/bootstrap.css" type="text/css" media="all">
<script src="/orbeon/config/theme/bootstrap.js">
<link rel="icon" href="/orbeon/config/theme/images/icone_grue.png" type="image/png">
But some links are not valid and point to the root of the application. The main problem is that I just can't make this behavior consistent to isolate the issue(s).
Help really appreciated ! It's driving me crazy...
I don't think there can be more than one GET or POST per request, but per open connection certainly.
However, this might be related to authentication since you mention j_security_check. Can you try to make sure that the CSS and other resources are not protected by form authentication?
When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">
If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!
ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.