I've locally compiled the fontawesome.less to my main.min.css, and also changed the font path in variables.less, but I still having problem with loading the icons? Can't figure out why. I've successfully loaded it through this way on my local html file but can't get through on WordPress. BTW, I'm using WinLess as my LESS compiler.
You have to make sure that your final minified CSS is linking to the fonts. It sounds like you're missing the path to the fonts – check your inspector tool.
Another alternative is to load from a CDN, e.g.
/**
* Enqueue javascript
*
*/
if( !function_exists( "theme_js" ) ) {
function theme_js(){
wp_register_script( 'fontawesome', 'https://use.fontawesome.com/9a8a083038.js',
array('jquery'),
'4.7.1', true);
wp_enqueue_script( 'fontawesome' );
}
}
add_action( 'wp_enqueue_scripts', 'datonomy_theme_js' );
Related
i have this code to import the css it's working fine but not updating my css latest update right now
// style imports
function themeslug_enqueue_style() {
wp_enqueue_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__), false );
wp_enqueue_style( 'my-style', plugins_url('/assets/mystyle.css', __FILE__), false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action('showForm', 'showInterface');
this is my plugin directory
turnvoer-calculator
assets
mystyle.css
turnover-calculator.php
If your stylesheet (mystyle.css) success enqueue but it's not update your latest changes - most of the case is because of cache issue (usually have at least 2 layers of cache in a WP site).
So you need to force your WP site to load the newest version of your stylesheet by adding time argument to your stylesheet's url. Your case, using this code:
wp_enqueue_style( 'my-style', plugins_url('/assets/mystyle.css?time=', __FILE__).time(), [], false );
Please replace it with your code and try again.
I am creating a theme with bootstrap for my WordPress site. I used codestar framework to make an admin panel. I want to use bootstrap icons instead of fontawesome icons used in Codestar framework. On the document page there is an explanation:
As you know, the Icon field works only in backend and you should to
include the icon CSS file in front-end by yourself. For eg. take a
look below enqueue styles example or use your own enqueue styles
method.
Here are the codes I need to change
if( ! function_exists( 'your_prefix_enqueue_fa5' ) ) {
function your_prefix_enqueue_fa5() {
wp_enqueue_style( 'fa5', 'https://use.fontawesome.com/releases/v5.13.0/css/all.css', array(), '5.13.0', 'all' );
wp_enqueue_style( 'fa5-v4-shims', 'https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css', array(), '5.13.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'your_prefix_enqueue_fa5' );
}
If still you want to use Font Awesome 4 only add this filter anywhere.
add_filter( 'csf_fa4', '__return_true' );
Bootstrap icon cdn =>
https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css
The problem is: How can I import the bootstrap icons into the code given above? Thank you in advance for your help.
I used translation for the question. If I'm not successful source:
http://codestarframework.com/documentation/#/fields?id=icon
So, I am trying to use the Rubik Mono One font on a website of mine, but it won't show up for anyone. I use #font face and tried clearing my cache ant it still did not work, here is the css:
#font-face {
font-family: 'Rubik Mono One';
src: url(https://fonts.gstatic.com/s/rubikmonoone/v9/UqyJK8kPP3hjw6ANTdfRk9YSN983TKU.woff2) format('woff2');
}
I just made 3 different tests with 3 different fonts including Rubik Mono One and everything is working fine.
Either you're enqueuing it badly. eg: You're not using <link rel="preconnect" href="https://fonts.gstatic.com">.
Or you're using some kind of framework like Bootstrap which is taking priority over your font.
Understanding dependencies and sequential order
Wordpress let you specify a dependency array upon script enqueuing.
$deps (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()
Source # https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Your css enqueuing order should look like this:
framework → google font → stylesheet
If your stylesheet is enqueued last, your defined style will be higher up in the firing sequence.
As I mentioned, we also need to add <link rel="preconnect" href="https://fonts.gstatic.com"> for Google Font to actually work. We can do just that by using style_loader_tag wordpress filter, which will filters the HTML link tag of our enqueued Google Font.
Here is the final code. Do keep in mind that, if you're using a framework you must specify the dependency for the Google Font tag.
<?php
add_action( 'wp_enqueue_scripts', 'theme_fonts' );
function theme_fonts() {
if ( ! is_admin() ) {
/**
* Register & Enqueue gfont_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap', [], wp_get_theme()->version, 'all' );
/**
* Add mandatory Google Font rel='preconnect' <link> and required attributes to gfont_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/style_loader_tag/
*/
add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
function data_gfont_css( $tag, $handle, $src ) {
if( $handle === 'gfont_css' ) {
$tag = str_replace(
"<link rel='stylesheet'",
"<link rel='preconnect' href='https://fonts.gstatic.com'>" . PHP_EOL . "<link rel='stylesheet'",
$tag
);
};
return $tag;
};
/**
* Register & Enqueue style_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'style_css', get_stylesheet_uri(), [ 'gfont_css' ], wp_get_theme()->version, 'all' );
};
};
?>
Dependencies are specified in betweens the brackets //... [ 'gfont_css' ] which is the equivalent to array( 'gfont_css' ).
Finally we can apply our font to our elements in our style.css, and we can add an !important statement to override as a redundancy. better not to do it tho if you're using multiple fonts.
body {
font-family: 'Rubik Mono One', sans-serif !important;
}
I have added this line on my plugin
wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
and it seems that the whole admin backend was affected of that bootstrap. Any ideas on how to be only on that plugin?
That's because you're not specifying anywhere that the file should be included only for your plugin page, and not for the whole admin backend. Try to add a conditional check and then enqueue the stylesheet.
global $post;
if ( 'enter_plugin_page_slug_here' == $post->name ) {
// enqueue stylesheet here
}
I am building a full design into WordPress for the first time and I am trying to load in stylesheets and script files but all I seem to be getting is the text output of the location.
What I have is below..
wp_enqueue_style('reset', bloginfo('template_url') . '/reset.css');
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', bloginfo('template_url') . '/rhinoslider-1.05.css', array('reset','style'));
Do I need to put this inside the link tags or something? I thought it would do it all itself; as what's the point loading it that way if it doesn't do it itself? I know it makes sure the same file isn't included twice or something, but if you have to include the link tags yourself and then WP decides not to include the file then you are left with blank link tags!?
Lastly, should I set these up beforehand so I can just call them via their handles? If so, where? functions.php?
Edit: I also tried putting the below in my themes functions.php file but got the same results.
add_action( 'after_setup_theme', 'mmw_new_theme_setup' );
function mmw_new_theme_setup() {
/* Add theme support for post formats. */
add_theme_support( 'post-formats' );
/* Add theme support for post thumbnails. */
add_theme_support( 'post-thumbnails' );
/* Add theme support for automatic feed links. */
add_theme_support( 'automatic-feed-links' );
/* Add theme support for menus. */
add_theme_support( 'menus' );
/* Load style files on the 'wp_enqueue_scripts' action hook. */
add_action( 'wp_enqueue_scripts', 'mmw_new_load_styles' );
}
function mmw_new_load_styles() {
$foo = bloginfo('template_url') . '/reset.css';
$bar = bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
When storing values in a variable via PHP use:
get_bloginfo()
So your new function would now look like:
function mmw_new_load_styles() {
$foo = get_bloginfo('template_url') . '/reset.css';
$bar = get_bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
And be more semantic! It makes code for beginners easier to look at. ($foo could be $resetCssUrl)
I was having similar issues.
The register / enqueue scripts are so that you can globally assign your functions to load in the correct order. You can call them from the page that your working in but it is considered better practice do it this way.
My template has a functions.php but its nealry empty! It sepreates the scripts into 7 subchapters, theme-options, theme-functions, themes-js, etc. Here is my themes.js.php file but this could quite easily placed in your file inside your wp-content/themes/functions.php My themes-js.php file