Font awesome icons before widget title

  • Adnan
    Adnan
    Elite Member 542 points
    August 13, 2015 at 7:18 pm

    Hi, I would like to use different font awesome icons before widget titles like in this forum. (see attachment)
    How can I achieve this? Unfortunately, putting the code <i> … </i> in heading field does not work.

    Attachments:
    You must be logged in to view attached files.
  • Mark
    Mark
    Titan 733 points
    August 13, 2015 at 9:33 pm

    Every widget title has unique ID so you can use css :before to place the icons there.

    A list of Font Awesome icons and their CSS content values

  • Adnan
    Adnan
    Elite Member 542 points
    August 13, 2015 at 9:50 pm

    Firebug shows no ids for widgets.

    I only have:
    <div class=”panel-heading”>Widget Title </div>

  • Mark
    Mark
    Titan 733 points
    August 13, 2015 at 11:44 pm

    What sort of widget is it? Is it the standard WordPress widget that you control under admin > Appearance > Widgets?

    Can you post your site link?

  • Aaron
    Aaron
    Super Guru 920 points
    August 14, 2015 at 12:06 am

    Just add the icon before the title in the wordpress widgets area:

    I.e:

    <i class=”fa fa-camera-retro fa-lg”></i> Recent Posts

  • Adnan
    Adnan
    Elite Member 542 points
    August 14, 2015 at 7:54 am

    @Aaron: This is not working. WordPress removes html code from title. Probably there is a filter for this. I can remove this filter in functions.php but would like to know if there is a better way.

    @Mark: standard widgets. You can try in your installation, the html code will be removed. No ids for widgets.

  • Mark
    Mark
    Titan 733 points
    August 14, 2015 at 9:25 am

    Use this plugin, which will let you specify your own widget css classes:

    https://wordpress.org/plugins/widget-css-classes/

    This reply was awarded the best answer by the topic poster.

  • Josh
    Super Guru 13,875 points
    August 14, 2015 at 2:38 pm

    Thanks for sharing Mark 🙂

  • Adnan
    Adnan
    Elite Member 542 points
    August 14, 2015 at 2:41 pm

    Thanks Mark, alternatively

    remove_filter( ‘widget_title’, ‘esc_html’ );

    in functions.php can be used. I did not test it yet.


  • Josh
    Super Guru 13,875 points
    August 14, 2015 at 3:03 pm

    Thanks Adnan 🙂

  • Mark
    Mark
    Titan 733 points
    August 14, 2015 at 3:39 pm

    @Adnan, that filter does not work (it used to in very old WP but now WP has a hardcoded strip tags function applied on widget titles).

  • Clive
    Clive
    Super Guru 1,818 points
    August 14, 2015 at 4:51 pm

    Such coding happiness on a Friday.

    Simply wonderful 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes