Fallback icons when web-font is blocked

By Ari on Monday, 10 April 2017

Replies 4

Likes 0

Votes 0

First, thank you for building and maintaining such a good and useful product. EasyBlog does what it is supposed to - which makes our blogging easier.
Now on to the current problem: A number of my users are unable to see the icons in their EasyBlog toolbar (just shows as a black bar). It turns out that their corporate firewalls and internet browser policies are blocking web-fonts such as font-awesome.
Do you have a workaround for a graceful fallback when font awesome icons are blocked?
For example, if you implemented something along these lines:
http://stackoverflow.com/questions/23653708/fallback-from-fontawesome-if-font-download-blocked
Then you would just need to provide png icons and map to them as described in the article.

EasyBlog is working well, but for these users they can't see the icons and so can't figure out how to use the product.

Thank you again,
Ari

Hello Ari,

Thanks for your input on this. To be honest, I am not entirely sure why would their firewalls prevent web fonts because this not only affects font awesome icons but a huge list of websites would look very ugly to them.

Having said that, it wouldn't be possible to actually have a fallback image because there is no way to know if the client supports the fonts or not. If we were to implement this, it's going to load a lot of duplicate resources which in turn slows down the site. I don't think this is a good idea to be honest.

Mark

Monday, 10 April 2017 21:16

0 Likes

0 Votes

0 Comments

#327805

I agree that it would be better if their organization's IT policies allowed the webfont - and EasyBlog looks great with the fa icons that your team has selected.
However, we do still have those users who cannot view them on their work computers...
I did notice a jquery that would check to see if the fa icons can be downloaded (reference here):

function css(element, property) {

  return window.getComputedStyle(element, null).getPropertyValue(property);

}



window.onload = function () {

  var span = document.createElement('span');

  

  span.className = 'fa';

  span.style.display = 'none';

  document.body.insertBefore(span, document.body.firstChild);

  

  if ((css(span, 'font-family')) !== 'FontAwesome') {

    // add a local fallback

  }

  document.body.removeChild(span);

};

Note that the fallback icons would only be loaded if the font-awesome icons cannot be loaded. So there's not much in the way of extra download to slow down the site in this case.
Would you mind posting a list of just the fa references EasyBlog uses and I could find icons to map them to instead in this fallback?

Thank you again for considering this.
Ari

Ari

Monday, 10 April 2017 22:02

0 Likes

0 Votes

0 Comments

#327821

Hello Ari,

If you are using javascript to do this, it definitely adds overhead when a browser renders your page. This would mean if there is a 100 span's that uses font awesome, it'll iterate through 100 of them.

I tried to perform a search but there are just too many places that uses font awesome and I can't really list them all down here. I would strongly suggest that you do a global search under the folder /components/com_easyblog/themes/wireframe/ for "fa-" in your favorite text editor, http://take.ms/QABy6

Mark

Monday, 10 April 2017 22:09

0 Likes

0 Votes

0 Comments

#327824