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!
Related
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.
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js
Hi I have a WooCommerce plugin activated and a Mystile theme. I want to add a custom js file located at mystile/includes/js/custom-script.js. Ive read on how to add files through using wp_enque_script but it is not loading the js files when I view page source.
I have this code block on functions.php of my current theme which is Mystile, which should have added my custom js file
function add_custom_assets(){
//Load masonry CSS and JS files
wp_enqueue_script('masonry', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
the above code does not work and I cannot see my JS file in source. I really dont know what I am doing wrong. I even tried wp_register_scripts but its the same thing.
The only change I did to the current theme was that I copied the templates folder from the woocommerce plugin directory to my current theme and renamed it woocommerce to override certain stuffs. Any suggestions
you should specify unique handles (so stuff don't get overridden)
function add_custom_assets(){
wp_enqueue_script('my-custom-script-handle', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
This is not a ideal solution but a hack and it does work. Enqueue the script as wp_enqueue_style rather than wp_enqueue_script. It does load the script but is a very dirty solution. Still the question is open though
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..