I use the Categories widget on my sidebar(s) and I would like to display a Font Awesome icon next to each category listed in the widget. The icon would be the same for all categories, for now, but I would like to give each category it's own unique icon in the future.

I would like to modify the Categories widget using code in my functions.php file to add the icon by inserting markup like <i class="fa fa-chevron-right"></i> into category's link/anchor element after the category's title. I could accomplish this via CSS, but in doing so I loose the ability to programmatically determine which icon to display, along with the flexibility for other improvements/changes that I may wish to make in the future.

Basically, I wish to achieve this effect:

Cat 1          >

Cat 2          >

Cat 3          >

_{(The greater-than symbol '>' represents the icon placement relative to the category title)}

I have Font Awesome enqueued in the functions.php file using the wp_enqueue_scripts hook as follows, and it loads and displays the icons perfectly. Note that I do not use any Font Awesome plugin built for WordPress.

/* Enqueue Scripts
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'essentials_enqueue_scripts' );
function essentials_enqueue_scripts() {
    /* jQuery */
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'jquery_ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/2.0.3/jquery-ui.min.js", false, null);
    wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/js/waypoints.min.js');
    wp_enqueue_script( 'essentials_main', get_template_directory_uri() . '/js/essentials_main.js', array(), '1.0.0', true );
    wp_enqueue_script( 'essentials_show_stuff', get_template_directory_uri() . '/js/essentials_show_stuff.js', array(), '1.0.0', true );
    /* Google Fonts */
    wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
    wp_enqueue_style( 'GoogleFonts');
    /* Font Awesome Fonts */
    wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
    wp_enqueue_style( 'Font Awesome'); 
}

Despite my best research efforts, I was unable to find a solution to modify the categories widget.

I use the Categories widget on my sidebar(s) and I would like to display a Font Awesome icon next to each category listed in the widget. The icon would be the same for all categories, for now, but I would like to give each category it's own unique icon in the future.

I would like to modify the Categories widget using code in my functions.php file to add the icon by inserting markup like <i class="fa fa-chevron-right"></i> into category's link/anchor element after the category's title. I could accomplish this via CSS, but in doing so I lose the ability to programmatically determine which icon to display, along with the flexibility for other improvements/changes that I may wish to make in the future.

Basically, I wish to achieve this effect:

Cat 1          >

Cat 2          >

Cat 3          >

_{(The greater-than symbol '>' represents the icon placement relative to the category title)}

I have Font Awesome enqueued in the functions.php file using the wp_enqueue_scripts hook as follows, and it loads and displays the icons perfectly. Note that I do not use any Font Awesome plugin built for WordPress.

/* Enqueue Scripts
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'essentials_enqueue_scripts' );
function essentials_enqueue_scripts() {
    /* jQuery */
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'jquery_ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/2.0.3/jquery-ui.min.js", false, null);
    wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/js/waypoints.min.js');
    wp_enqueue_script( 'essentials_main', get_template_directory_uri() . '/js/essentials_main.js', array(), '1.0.0', true );
    wp_enqueue_script( 'essentials_show_stuff', get_template_directory_uri() . '/js/essentials_show_stuff.js', array(), '1.0.0', true );
    /* Google Fonts */
    wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
    wp_enqueue_style( 'GoogleFonts');
    /* Font Awesome Fonts */
    wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
    wp_enqueue_style( 'Font Awesome'); 
}

Despite my best research efforts, I was unable to find a solution to modify the categories widget.

I'm having troubles here. I use the Categories widget on my sidebar(s) and I would like to be able to use a font awesome icon on it. The icon would be the same icon for now, and I would modify it later to make the categories have separate icons.

I would like to modify the Categories widget within my functions.php file to inject/insert an icon like <i class="fa fa-chevron-right"></i> inside the link, but after the text. I am able to do it via style.css, but I feel that I am going to be limited to what I can do in the future.

In the future, I want to be able to set an icon via the categories section to each individual category, which would be displayed on the sidebar. I do not really wish to have to put 25 lines of code into my CSS to display the different icons. I would be fine doing an array or such within my functions.php file.

Basically

Cat 1 >

Cat 2 >

Cat 3 >

The > is the icon

I have Font Awesome enqueued in the functions.php file and it calls up and displays icons perfectly. I do not use any Font Awesome plugin built for WordPress.

This is how I enqueue Font Awesome.

I had done research, and that was it. I wasn't able to find a solution on my own to modify the categories widget. I have learned through this, mainly the remove_filter and preg_replace.

From my understanding, not everyone see's this question as 'WordPress Specific', but if I tried to place this on StackOverflow.com, I feel that they would refer to me to here :)

I use the Categories widget on my sidebar(s) and I would like to display a Font Awesome icon next to each category listed in the widget. The icon would be the same for all categories, for now, but I would like to give each category it's own unique icon in the future.

I would like to modify the Categories widget using code in my functions.php file to add the icon by inserting markup like <i class="fa fa-chevron-right"></i> into category's link/anchor element after the category's title. I could accomplish this via CSS, but in doing so I loose the ability to programmatically determine which icon to display, along with the flexibility for other improvements/changes that I may wish to make in the future.

Basically, I wish to achieve this effect:

Cat 1          >

Cat 2          >

Cat 3          >

_{(The greater-than symbol '>' represents the icon placement relative to the category title)}

I have Font Awesome enqueued in the functions.php file using the wp_enqueue_scripts hook as follows, and it loads and displays the icons perfectly. Note that I do not use any Font Awesome plugin built for WordPress.

Despite my best research efforts, I was unable to find a solution to modify the categories widget.

I'm having troubles here. I use the Categories widget on my sidebar(s) and I would like to be able to use a font awesome icon on it. The icon would be the same icon (just an arrow pointing to the right)..

I really don't want to re-invent the wheel here, so if I could just pop something into my themes function.php file that would be great (this is a custom theme of mine.) I don't want to completely have to rebuild the Widget itself, if that's what must be done, I can easily do that. I would prefer just to pop a little code into the functions.

Basically

Cat 3 >

The > is the icon

---Edit---

Before anyone says use a background image, I do not want to do that. I would like it to be physical.

---Edit for Daniel---

  <ul>
        <li class="cat-item cat-item-7"><a href="#" title="text">News</a></li>
        <li class="cat-item cat-item-11"><a href="#" title="text">jQuery</a></li>
        <li class="cat-item cat-item-1"><a href="#" title="text">Plugin Updates</a></li>
        <li class="cat-item cat-item-3"><a href="#" title="text">Theme Updates</a></li>
  </ul>

This is the output of the HTML.

--EDIT--

Since I was getting down voted, and someone asked for more details.

This is WordPress specific due to me wanting to customize WordPress categories via the FUNCTIONS.PHP file. I would have coded another Widget if I needed to, but wanted to just pop something into the functions.php file. I wasn't looking for a CSS route as this will be more customizable in the future.

I had done research, and that was it. I wasn't able to find a solution on my own to modify the categories widget. I have learned through this, mainly the remove_filter and preg_replace.

I'm having troubles here. I use the Categories widget on my sidebar(s) and I would like to be able to use a font awesome icon on it. The icon would be the same icon for now, and I would modify it later to make the categories have separate icons.

I would like to modify the Categories widget within my functions.php file to inject/insert an icon like <i class="fa fa-chevron-right"></i> inside the link, but after the text. I am able to do it via style.css, but I feel that I am going to be limited to what I can do in the future.

In the future, I want to be able to set an icon via the categories section to each individual category, which would be displayed on the sidebar. I do not really wish to have to put 25 lines of code into my CSS to display the different icons. I would be fine doing an array or such within my functions.php file.

Basically

Cat 3 >

The > is the icon

I have Font Awesome enqueued in the functions.php file and it calls up and displays icons perfectly. I do not use any Font Awesome plugin built for WordPress.

I had done research, and that was it. I wasn't able to find a solution on my own to modify the categories widget. I have learned through this, mainly the remove_filter and preg_replace.

From my understanding, not everyone see's this question as 'WordPress Specific', but if I tried to place this on StackOverflow.com, I feel that they would refer to me to here :)