I am working with WordPress + WooCommerce & when I am logged in the icon for the shopping cart work fine, if I am logged out like a regular user they show up as a square like an icon is not recognized.
I have narrowed it down to this:
In my functions.php I have added this
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/ovr.css', array());
}
Which loads in a custom CSS file that I have created. If I remove this then the icons show up as they should, at first I thought it must be some CSS blocking the icons but it doesn't make sense as they show up fine when I am logged in?
Any help would be greatly appreciated.
If it's a fontawesome icon try to add this to the icon's class in the css file:
font-family: "fontawesome";
Or if this didn't work use 'font-family: "fontawesome" !important;', or try any other font-family which your fontawesome support (by version).
See more: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
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
I am trying to set up a template that will apply some .css code to hide the header, footer and breadcrumbs on my landing pages.
I've created a css folder in my child theme, created a .css file with the code below and works perfectly with the function under the code:
#header-wrap, #navi-wrap.site-header, #footer-wrap, #footer.clearfix, #sidebar.secondary.clearfix, #breadcrumbs, .page-title {
display:none
}
Function in my child theme:
function wpse_enqueue_page_template_styles() {
if ( is_page_template( 'template-fullwidth.php' ) ) {
wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/landing-page.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );
I have another .css code though, that changes the link colour from the website default Blue to White, in my Adidtional CSS for my theme and it works, but I would like to include it in my .css file, so I don't have to apply it to every page separately:
.page-id-2934 a.wp-block-button__link.has-white-color.has-text-color.has-background.no-border-radius{
color:white;
}
Problem is, when I add this code as it is (without the page id, obviously) in my existing .css file, an exclamation mark shows up on the left and when I hover it tells me to not use adjoining clases, that a,wp... it's Overqualified and I should use only .wp-block-button__link without element name and I don't know what that means.
When I leave only .wp-block-button__link {color:white;} it's not working.
I also have some pages with different buttons and the code that works in the Additional CSS is
.page-id-3547 a.uagb-buttons-repeater {
color:white;
}
...But when I put that in the .css file I get the same message: with a... is overqualified and when I leave just .uagb-buttons-repeater {color:white;} it doesn't work.
So, long story short, I would like to add the white link .css code in the .css file, so that my landing pages button links are white, not blue and I was hoping to add both codes, so that it works with both button types.
Alternatively, I could just use the second button type (a.uag...) and change it on the existing pages.
Thanks
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 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.
I am trying to design a wordpress theme that has a problem with admin bar. If I select "don't show user bar" it's working properly. But when I want to see admin bar in the top, the themes looks like picture I attached. I couldn't see my logo its accurate size.
you could customize the admin bar layout by making it almost transparent in order to see what lies beneath it. This can be accomplished by overriding the default admin bar style used by WordPress so to make it 30% opacity and fully visible only on hover:
function my_theme_setup() {
add_theme_support( 'admin-bar', array( 'callback' => 'my_admin_bar_style') );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_admin_bar_style() {
?>
<style>
#wpadminbar {position:fixed;opacity:0.3;}
#wpadminbar:hover {opacity:1;}
</style>
<?php
}