I had a very big problem on my site: I got font-awesome to load twice in the header. The first one was pointing to the local version embedded in Salient Theme (fa 4.2.0), the second one was loaded through netdna CDN (fa 3.2.1).
The problem was that if i deregistered the Salient FA, then the Nectar Shortcode Icon wouldn\'t appear: no icon displayed at all.
So, first i had to figure out where the netdna version came from, and I\'ve found it loaded by the Menu Social Icon plugin that someone else installed, then I loaded the bootstrapcdn version in this way:
BUT no icon showing at all yet. How that\'s possible? A little bit of lurking around how font-awesome works, and I\'ve found that the targeted items in the official site have css classes like:
<iclass=\"fa fa-lightbulb-o\"></i>
While Salient only applied
<iclass=\"fa-lightbulb-o\"></i>
So then the solution come to my mind: add an additional \"fa\" to the Nectar Shortcode image field in the Visual Composer. This was the automatic shortcode as-spitted-out:
I don\'t know if this is a bug of the current implementation or a desired behaviour to limit cdn-loads (although it\'s just nonsense to me). Just wanted to share with you and others this possible fix to let your site load faster by leaving around 300KB+ per-user away from your server traffic!
Try opening your functions.php file and changing these items:
wp_enqueue_style(\'font-awesome\');
wp_register_style(\'font-awesome\', get_template_directory_uri() . \'/css/font-awesome.min.css\');
to this:
wp_enqueue_style(\'font-awesome-2\');
wp_register_style(\'font-awesome-2\', get_template_directory_uri() . \'/css/font-awesome.min.css\');
Also, if you’re using page transitions, change the method to the standard option form the “AJAX” one
I don\'t understand your proposed \"fix\". My problems was simple: I had font-awesome loaded twice. By adding your lines to functions.php, then the only change would be to load font-awesome once more, for a total of THREE TIMES! This translates to longer site load times, higher bandwidth usage and worst SEO ranking!
On the contrary, my solution deregisters the twice-loaded Font Awesome to load it from a free public CDN: this means 3x lower bandwith, overall faster load times and always up-to-date font-awesome.
I just wanted to notice the ThemeNectar team that the integrated shortcode does not apply the suggested standard guidelines for Font Awesome, as the shortcode omits the \"fa \" prefix in the target class! In other words:
CORRECT: class=\"fa fa-lightbulb-o\" -> CDN fontawesome works
WRONG: class=\"fa-lightbulb-o\" -> CDN fontawesome doesn\'t work
Hi!
I had a very big problem on my site: I got font-awesome to load twice in the header. The first one was pointing to the local version embedded in Salient Theme (fa 4.2.0), the second one was loaded through netdna CDN (fa 3.2.1).
The problem was that if i deregistered the Salient FA, then the Nectar Shortcode Icon wouldn\'t appear: no icon displayed at all.
So, first i had to figure out where the netdna version came from, and I\'ve found it loaded by the Menu Social Icon plugin that someone else installed, then I loaded the bootstrapcdn version in this way:
add_action( \'wp_enqueue_scripts\', \'fawesome_cdn\', 9999 );
function fawesome_cdn() {
wp_deregister_style(\'font-awesome\');
wp_deregister_style(\'fontawesome\');
wp_register_style(\'font-awesome\', \'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\');
wp_enqueue_style(\'font-awesome\');
}
BUT no icon showing at all yet. How that\'s possible? A little bit of lurking around how font-awesome works, and I\'ve found that the targeted items in the official site have css classes like:
<i class=\"fa fa-lightbulb-o\"></i>
While Salient only applied
<i class=\"fa-lightbulb-o\"></i>
So then the solution come to my mind: add an additional \"fa\" to the Nectar Shortcode image field in the Visual Composer. This was the automatic shortcode as-spitted-out:
[icon color=\"Accent-Color\" animation_speed=\"Slow\" size=\"large\" icon_size=\"\" animation_delay=\"\" image=\"fa-lightbulb-o\"]
Just added \"fa \" before \"fa-lightbulb-o\":
[icon color=\"Accent-Color\" animation_speed=\"Slow\" size=\"large\" icon_size=\"\" animation_delay=\"\" image=\"fa fa-lightbulb-o\"]
And everything worked back again!
I don\'t know if this is a bug of the current implementation or a desired behaviour to limit cdn-loads (although it\'s just nonsense to me). Just wanted to share with you and others this possible fix to let your site load faster by leaving around 300KB+ per-user away from your server traffic!
Hey,
A simpler fix is available .
Try opening your functions.php file and changing these items:
wp_enqueue_style(\'font-awesome\');
wp_register_style(\'font-awesome\', get_template_directory_uri() . \'/css/font-awesome.min.css\');
to this:
wp_enqueue_style(\'font-awesome-2\');
wp_register_style(\'font-awesome-2\', get_template_directory_uri() . \'/css/font-awesome.min.css\');
Also, if you’re using page transitions, change the method to the standard option form the “AJAX” one
Cheers
ThemeNectar Support Team
Hi Tahir,
I don\'t understand your proposed \"fix\". My problems was simple: I had font-awesome loaded twice. By adding your lines to functions.php, then the only change would be to load font-awesome once more, for a total of THREE TIMES! This translates to longer site load times, higher bandwidth usage and worst SEO ranking!
On the contrary, my solution deregisters the twice-loaded Font Awesome to load it from a free public CDN: this means 3x lower bandwith, overall faster load times and always up-to-date font-awesome.
I just wanted to notice the ThemeNectar team that the integrated shortcode does not apply the suggested standard guidelines for Font Awesome, as the shortcode omits the \"fa \" prefix in the target class! In other words:
CORRECT: class=\"fa fa-lightbulb-o\" -> CDN fontawesome works
WRONG: class=\"fa-lightbulb-o\" -> CDN fontawesome doesn\'t work
Hope I was clear enough for you.
Thanks for the Feedback. Will notify the Developer.
Best.
ThemeNectar Support Team