CODEWITHSUNDEEP
javascriptcsscdnfont-awesomefallback
AlwaysALearner
AlwaysALearner

Reputation: 6690

Fallback plan for loading fontawesome

UPDATE: to make my question clearer, I referred the following code snippet and implemented something similar-

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

I'm loading font-awesome.css and the fallback in my JSP this way-

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" />

<script>
    function fallbackForFontAwesome() {
        if (typeof bootstrapcdn == "undefined") {
            document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
            if (typeof cloudflare == "undefined") {
                document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));
            } else {
                alert('loading from cloudfare');
            }
        } else {
            alert('loading from bootstrap cdn');
        }
    }
    fallbackForFontAwesome();
</script>

As per this code snippet, I expected for the execution of alert('loading from bootstrap cdn'); to happen. But it didn't. Does the code if (typeof bootstrapcdn == "undefined") and if (typeof cloudflare == "undefined") check if the css has been loaded from respective URLs or not? Am I going wrong somewhere?

Upvotes: 1

Views: 1609

Answers (3)

Matt Smith
Matt Smith

Reputation: 2120

Create a function that added a <span> to the body to check if the FontAwesome font type has loaded (via the CDN).

window.onload = function () {
  var span = document.createElement('span'),
    headHTML = document.head.innerHTML;

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  //if 'FontAwesome' didn't load, add a local fallback link to the head
  if (span.style.fontFamily !== 'FontAwesome') {
    headHTML += '<link rel="stylesheet" href="path/to/local/fallback.css">';
    document.head.innerHTML = headHTML;
  }

  document.body.removeChild(span);
};

Upvotes: 0

Chris Smith
Chris Smith

Reputation: 480

You can test if FontAwesome has loaded by creating a span which uses FontAwesome's 'fa' class and then testing its font. You then remove the span and return the result.

function isFontAwesomeLoaded() {
    var span = document.createElement('span');
    span.className = 'fa';
    document.body.appendChild(span);
    var result = (span.style.fontFamily === 'FontAwesome');
    document.body.removeChild(span);
    return result;
}

This function will give you a true or false result, so you can use to load a local fallback (document.write etc.) if false.

Upvotes: 3

Naveen Singh raghuvanshi
Naveen Singh raghuvanshi

Reputation: 169

Your javascript variable are undefined

Your code is wrong somewhat use )) double closing brackets at the end in both statements

document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));

now it should work also if it get into first if statement the u have to write your code like this otherwise it will not go to else

function fallbackForFontAwesome() {
    if (typeof bootstrapcdn == "undefined") {
        document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
        if (typeof cloudflare == "undefined") {
            document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));
        }
        else {
            alert('loading from cloudflare cdn');
        }
    } else {
        alert('loading from bootstrap cdn');
    }
}
fallbackForFontAwesome();

Upvotes: 2

Related Questions