CODEWITHSUNDEEP
phpcsswordpresswordpress-themingfont-awesome
Mike
Mike

Reputation: 15

Changing Font Awesome icon using CSS does not work

we want to modify an Awesome Font icon in our WordPress theme for the whole web. The theme is built with a framework (bebel) and we do not know how to modify the HTML to change the class in the code, because in addition it uses VisualComposer for custom boxes.

Then we want to change the icon by css, I'm going to an option to add extra css of my theme and I put the following rule:

CSS input: 

.fa-location-arrow::before {
    font-family: FontAwesome;
    content: "\f041" !important;
}

The changes do not apply, pulse F12 in chrome and inspect the icon. The CSS rule looks like this.

CSS Output: 

.fa-location-arrow::before {
     Font-family: FontAwesome;
     Content: \"\\f041\" !important;
 }

CSS Output image:

F12 Chrome CSS error syntax Image

Is it possible that when saving the css, the topic is processed in php in some special way? Who knows why this happens

Thank you!

Upvotes: 0

Views: 1136

Answers (2)

Mike
Mike

Reputation: 15

I just solved it. I have removed the css from the "Global CSS" option that includes the theme and I pasted the same code into the "style.css" file of the WordPress child theme. Now it works perfectly although I still do not understand why it did not work before. I suspect it will be some way to write to the css through php.

Thank you all!

Upvotes: 0

Tristup
Tristup

Reputation: 3663

Seems that the fontawesome is missing, so download it and place it in your theme css folder and linked it in your functions.php

 function enqueue_fontawesome(){
    wp_enqueue_style( 'font-awesome', $template_dir . '/css/font-awesome.min.css', array() );
}
add_action('wp_enqueue_scripts','enqueue_fontawesome');

change the css file path according to your theme folder structure. Hope this will work for you.

Upvotes: 1

Related Questions