1

I have a WP Plugin where i use Font-Awesome Icons. I added the Font-Awesome folder to my Plugin Files and told WordPress to use them:

// add font-awesome to admin area
function ecp_admin_enqueue($hook) {
    // check if plugin page
    global $ecp_settings_page;
    if ( $hook != $ecp_settings_page ) {
        return;
    }
    // add to wp
    wp_register_style( 'ecp_admin_fontawesome', plugins_url('/font-awesome/css/font-awesome.min.css' , __FILE__) );
    wp_enqueue_style( 'ecp_admin_fontawesome' );
}
add_action( 'admin_enqueue_scripts', 'ecp_admin_enqueue' );

The CSS is added by WordPress - this is from the Sourcecode of the Backend when i´m on the Plugin Settings-Page:

<link rel='stylesheet' id='ecp_admin_fontawesome-css'  href='http://url.tld/path/to/plugins/my-plugin/inc/font-awesome/css/font-awesome.min.css?ver=4.6.1' type='text/css' media='all' />

Font-Awesome is working as it should BUT it changed the default Font from WordPress. How can i fix it or why does this happen?

enter image description here On a WordPress Page like Dashboard

enter image description here On Plugin Page with Font-Awesome loaded

  • This looks like a CSS problem rather than a WP problem. Without an example of the CSS applied to the nav links there's no way to answer anyway. I suspect you've applied font awesome to the whole link and so overridden the text font. – Andy Macaulay-Brook Oct 7 '16 at 14:57
  • I thought about your comment because i didn´t change anything related with the nav. But I also use Bootstrap. Could this be the reason? Bootstrap changes the li layout which WP is using in the Navigation. – wassereimer Oct 7 '16 at 15:05
0

It was not Font-Awesome that changed the default WordPress Style. I also use Bootstrap. One file called scaffolding.less overrides the WordPress defaults with:

// Body reset

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  font-family: @font-family-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @text-color;
  background-color: @body-bg;
}

I just added this to my custom CSS File (original WordPress CSS) with !important:

/* Override Bootstrap Reset with WP default */
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}

Now WordPress looks like it should again.

| improve this answer | |
-1

Use this plugin to insert and load Font Awesome Icons and Bootstrap

Best Editor

| improve this answer | |
  • Link only answers —and especially those without any explanation— are not really appreciated. Links get dead, rendering such answers worthless and forcing people to clean up afterwards. Please make sure that your answer works without a link as well. Thanks – kaiser Sep 3 '17 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.