I migrated my wordpress site from a shared host to Digitalocean and everything went well except for the Font Awesome icons.
They are showing as blank squares on the live site.
I found the issue to be the required "fa" class for the icons is not showing up. I am using the Avada theme and am brand new to this.
1) I do not know where the CDN link is when I am searching through SFTP files. Can someone tell me where to find it so I can try to re-add the link.
2) Is there another way to automatically have the "fa" class to the icons so they will show up?
3) Any other insight into fixing the issue would be much appreciated.
Add this to your functions.php file:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts()
{
// add this line
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
// Example styles and scripts
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
alternatively you can add this code to your header.php file:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Let me know if this works or not.
For anyone still having this issue in Wordpress & Avada:
Have had this multiple times, this is how I solved it last time.
Verify that the link is right, checking for typo's in the error link.
Verify that the files of the error link are in place, also check if FTP rights are set right. (755 for folders, 644 for files)
If the fonts still do not show, de-activate themes and plugins and re-activate them.
Goto Avada -> Options -> Performance
Flush Avada cache
I have the similar issue before, every time after migrating the website, the built in font awesome not showing at all, and display the square instead.
Then I go the "theme options" - click the "save" button directly, then hard refresh the page, everything will back to normal.
Or in some case, you need to double check the font awesome version from "theme features", turn on "Font Awesome v4 Compatibility" and turn off "Font Awesome Pro".
Hope that helps.
Related
The Mega Menu plugin works well except when activated it affects But some WordPress Dash icons not showing properly.
I have already installed cache plugins like Autoptimize and WP Rocket as well.
After clear cache from admin side but don't work till now. Also not giving any error in the Browser console.
URL: https://www.socomtactical.net
Max Mega Menu Plugin: https://wordpress.org/plugins/megamenu/
Note: I can't use Elemetor on my Website.
Screenshot:
Please let me know what is actually issue?
Thank you.
If you want to add Dashicons on WordPress frontend, you will need to enqueue them using PHP code in your theme functions.php file:
/* Add Dashicons in WordPress Front-end */
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Sample :
<i class="dashicons dashicons-admin-comments"></i>
Chose icon
Woocommerce is not loading my assets. I can see all my other theme assets files like css, js and all that works perfectly. I have my header and footer in place on the checkout page, in my header.php I got my <?php wp_head(); ?> in place and that seems to work alright except for Woocommerce.
Currently my checkout is loading purely the html without any assets. JS wont work (eg. clicking to toggle coupons field), css wont load.
How may I solve this? tried to override the form-checkout.php (https://github.com/woocommerce/woocommerce/blob/3.8.0/templates/checkout/form-checkout.php) and force my get_header and get_footer, without any success.
maybe try to find if for some reason your theme is disabling it?
look for code like this - add_filter( 'woocommerce_enqueue_styles', '__return_false' ); OR define( 'WOOCOMMERCE_USE_CSS', false );
I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
I am fairly new to Wordpress. I am trying to add a Font Awesome to the "list" of my wp_enqueue style sheets. When I add it by using the CDN link, it works perfectly. However, when I add the stylesheet manually, it shows boxes around the area where the icon should be (as if there is nothing or hasn't been added).
Here is my current code which is NOT working
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
Below is the code that does work.
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
How do I go about linking or calling the Font Awesome stylesheet that is in my CSS folder? I have added actions on my side, My only issue is getting the FA stylesheet to work manually.
I think you forgot to add fonts directory.which contain fonts file used by the font-awesome.min.css file.
I assume, that you are working on a child theme. You are calling the 'parent theme' directory when enqueuing the font-awesome. Try to use
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.min.css');
More info https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
Also check the path to the CSS by puting it in the browser, ie http://www.example.com/wp-content/themes/mytheme/css/font-awesome.min.css
Here's how I did it:
In the header.php file (or where-ever you keep your header code,) copy and paste this code:
<link rel="stylesheet" src="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
This is a whole lot better than fiddling with PHP. Another way is to install a Font Awesome plugin for WordPress, which does work. Just go to the Plugins area and search for "font awesome." Click the Easy FontAwesome plugin, install it, activate it and you're done!
Ok want to make sure I'm doing this right! I think I've got this working but want to make sure. FYI: this is a wordpress site.
I'm enqueuing Font Awesome the new way they are doing it now - they email you a CDN script code to embed. I realize the correct way to add the script into WordPress is to Enqueue it in the functions.php file - so here's what I did... is this correct? (it does work but that doesn't mean I have it completely right...)
//* For importing fontawesome
add_action( 'wp_enqueue_scripts', 'wp_fa' );
function wp_fa() {
wp_enqueue_script( 'font_awesome', 'https://use.fontawesome.com/4b9e255a4a.js' );
}
** I noticed in other tutorials on this there is something else at the end after the .js file like null, all, true or something which I don't have, but it is still working. Can someone confirm if I have this code correctly?
Yes, what you have done is correct.
The other values you speak of are
dependencies (This could be something that requires jquery)
version (Really handy for adding a version number on the end of the script you are enqueuing)
Whether you would like the script loading in the footer or not
So you could have something like this -
wp_enqueue_script( 'font-awesome-custom', 'https://use.fontawesome.com/4b9e255a4a.js', array('jquery'), '1.0.0', true );
I know font-awesome does not have a dependency of jQuery, it is just there as an example of it.