Support

Admin Tools

#23389 Tip: CDN and Font Awesome

Posted in ‘Admin Tools for Joomla! 4 & 5’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Environment Information

Joomla! version
n/a
PHP version
n/a
Admin Tools version
n/a

Latest post by iamalive on Wednesday, 07 October 2015 02:45 CDT

Tuesday, 06 October 2015 09:21 CDT

iamalive
 Hi Nicholas

I still couldn't get the font awesome signs to show up. I looked with different browsers on different machines and still all I could get was a placeholder.

So, despite your assurances it was only a cache problem, I continued to look for a solution and finally what worked for me, was to replace the cross-origin section in the admintools htaccess maker with the following :

## Cross-Origin Resource Sharing (CORS) -- See http://enable-cors.org/
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
# mod_headers, y u no match by Content-Type?!
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

And bingo! The problem went away. Maybe it's something worth building into admintools.

As always, I am grateful to you for brilliant components which I use on everything I build and your invaluable insights into many of the problems I've encountered. Passing this on, will hopefully contribute to your vast fund of Knowledge.

Regards
David

Tuesday, 06 October 2015 11:55 CDT

nicholas
Um, your code block has actually nothing to do with what the CORS block currently does. Please see http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work

Basically, your code does not allow CORS for index.php which is the intended purpose of this .htaccess Maker option.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Tuesday, 06 October 2015 12:35 CDT

iamalive
OK.
You are the expert.
My research was focused on getting font-awesome icons to show up reliably, which this does. I'm guessing here, but maybe there is a combination or an extra part for the .htaccess maker. Font Awesome is being used more and more - so is CDN, so maybe adding that function as an option makes sense.

I know too little to seriously argue such a point - for me, I'm just passing on something to you, which may be of use. If not, that's OK too.

Regards
David

Tuesday, 06 October 2015 16:02 CDT

nicholas
I honestly do not believe that the CORS section is interfering with the display of FontAwesome. For the heck of it I tried loading Font Awesome on my dev site first using the MaxCDN method they have in http://fontawesome.io/get-started/ and second with a copy of FA on the dev site itself. In both cases it is loaded just fine, exactly as expected.

Please keep in mind that CORS stands for Cross Origin Resource Sharing. It has only got to do when a piece of Javascript hosted on an external site (different domain name and/or port) is pulling data FROM your site. Loading FontAwesome only has your browser load a CSS files from a CDN. This cannot be limited by CORS.

I don't know what exactly causes the conflict on your site but I can tell you with 100% certainty that no, enabling the CORS feature in the .htaccess Maker has absolutely nothing to do whatsoever with loading FontAwesome from a CDN.

For what is worth, the dead simple code I used in my plugin to load FontAwesome is:
public function onContentPrepare($context, &$row, &$params, $page = 0)
	{
	    $document = JFactory::getDocument();
	    $document->addStyleSheet('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
	}

If you want to know, I just used the very simple NS Font Awesome plugin you can find on the JED and modified the line 
$document->addStyleSheet(JURI::base(). "plugins/system/ns_fontawesome/fontawesome/css/font-awesome.css");
to instead use the CDN. I don't think loading FontAwesome can get any simpler than that. I mean, it takes me MUCH more time to write this than search the JED, download the plugin, run the tests, edit the plugin and rerun the tests :)

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Tuesday, 06 October 2015 16:09 CDT

iamalive
Well I really appreciate you taking this time to check stuff out and write this answer, Really, I appreciate it a lot.

It may be that because I am using a rockettheme template with Gantry 4 that makes use of the awesome font, that the cause is somewhere in there. I don't know - I am not a programmer. I do understand enough to see what you have described.

Again, I meant it in a positive way.

Best regards
David

Wednesday, 07 October 2015 02:37 CDT

nicholas
Hm, Gantry does some weird things alright. I'm pretty sure they don't just load the CSS in the head when needed as the plugin I use does. This could explain the conflict. Long story cut short, if you don't need CORS don't enable CORS. I think that's the safest rule of thumb we can give.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Wednesday, 07 October 2015 02:45 CDT

iamalive
Ok - thanks.

I also forgot to mention that I use the CDN Plugin from NoNumber.

Whatever - it's working now. Again thanks for your time and trouble.

Regards
David

Support Information

Working hours: We are open Monday to Friday, 9am to 7pm Cyprus timezone (EET / EEST). Support is provided by the same developers writing the software, all of which live in Europe. You can still file tickets outside of our working hours, but we cannot respond to them until we're back at the office.

Support policy: We would like to kindly inform you that when using our support you have already agreed to the Support Policy which is part of our Terms of Service. Thank you for your understanding and for helping us help you!