Adding Font-Awesome Icons to new Widgets

Hi,
Add this to your child theme’s style.css

.widget_top_posts h3::before {
    content: "\f086"; //CHANGE
}

Thank you for the quick help, but what exactly was this supposed to do for me?

I pasted it in as custom CSS just to see if it’d help me at all but it doesn’t seem to change anything. Will it only help if I paste it in the child theme’s style.css?

It also seems weird to me that simple code like this would accomplish what I want in general, which is to be able to use a variety of font-awesome icons depending on what widget I am using (I left the top post/page widget as an example, but I am still considering adding others that currently run into the same issue of not having an icon).

Hi,
Sorry. A small typo. Note the hyphen between top and posts.

.widget_top-posts h3::before {
    content: "\f086"; //CHANGE
}

You will have to add one such piece of code for each widget that you want to add, along with the icon you want to choose for it.

Great, thanks for this!

Just to add in case others stumble upon this post:

1) The code Menaka provided is the right sort of code, but it contains two elements that have to be changed depending on the specific widget and the icon you want to use.

2) So, change .widget_top-posts to whatever the class is of the widget you are wanting to add an icon to. You can find this by ‘inspecting element’ over the widget title.

3) Change ‘f086’ to the unicode value for whatever font-awesome icon you want to use. You can find the unicode values on Font Awesome’s website (or elsewhere, search for ‘font awesome unicode’ or ‘font awesome css value’)

4) Insert into your child theme’s style.css and you are all set!

Thanks bigkitchentinyhouse for elaborating it. Appears like I was too cryptic. ??

This is harder than it seems…

I have added a few of them using this code, but some just doesn’t seem to work, or sometimes they work, and sometimes don’t ?!?

I have found this code to be added to functions.php:

add_filter( 'widget_title', 'do_shortcode' );
add_shortcode( 'icon', 'shortcode_fa' );
function shortcode_fa($attr, $content ) {
return '<i class="fa fa-'. $content . '"></i>';
}

And you can then just add [icon]YOUR FONTAWESOME ICON NAME[/icon] on the widget title.

This works, but i don’t know if it could mess something? I also don’t know why when using style.css the icons sometimes doesn’t work?

Would it be possible to the Customizr author to include this or a better code and provide an easy way to insert Font Awesome not only on widget titles but everywhere we want?

Thanks!!