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

Improve this question
2
  • 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
    Commented Oct 7, 2016 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
    Commented Oct 7, 2016 at 15:05

2 Answers 2

Reset to default
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
1
  • 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
    Commented Sep 3, 2017 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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