Title: Using Fontawesome icons
Last modified: August 22, 2016

---

# Using Fontawesome icons

 *  Resolved [Smaele](https://wordpress.org/support/users/smaele/)
 * (@smaele)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/)
 * Hello,
 * I´m using this plugin but I would like to add two small fontawesome icons/images
   next to the title (right aligned).
 * I have found the forum topic that explains how to use a background image. But
   how can I use font awesome icons? For example the caret icons.
 * Any idea?
 * [https://wordpress.org/plugins/accordion-shortcodes/](https://wordpress.org/plugins/accordion-shortcodes/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * (@philbuchanan)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886068)
 * You can use the CSS `:before` of `:after` pseudo-element in your theme’s stylesheet
   to add custom icons. Something like this should work:
 *     ```
       .accordion-title:before {
           font-family: FontAwesome;
           content: "\f095";
           /* Your other custom CSS here */
       }
       ```
   
 *  Thread Starter [Smaele](https://wordpress.org/support/users/smaele/)
 * (@smaele)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886104)
 * Hi Phil,
 * Thank you for your quick response. This is working!
 * I hardly dare ask: how do I get it right aligned?
 *  Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * (@philbuchanan)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886107)
 * Try this instead:
 *     ```
       .accordion-title:after {
           float: right;
           font-family: FontAwesome;
           content: "\f095";
           /* Your other custom CSS here */
       }
       ```
   
 *  Thread Starter [Smaele](https://wordpress.org/support/users/smaele/)
 * (@smaele)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886110)
 * Hi Phil,
 * Got the right align resolved this way:
 *     ```
       .accordion-title:after {
           font-family: FontAwesome;
       	content: "\f138";		/*chevron-circle-right*/
       	float:right;
       }
   
       .accordion-title.open:after {
           content: "\f13a";			/*chevron-circle-down*/
       }
       ```
   
 *  Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * (@philbuchanan)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886111)
 * That’ll do it. Although you shouldn’t need to repeat the `font-family` and `float`
   in the `.accordion-title.open:after {}` part. Those should be inherited from `.
   accordion-title:after {}`.
 * Glad it’s working for you!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Using Fontawesome icons’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/accordion-shortcodes.svg)
 * [Accordion Shortcodes](https://wordpress.org/plugins/accordion-shortcodes/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/accordion-shortcodes/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/accordion-shortcodes/)
 * [Active Topics](https://wordpress.org/support/plugin/accordion-shortcodes/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/accordion-shortcodes/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/accordion-shortcodes/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/using-fontawesome-icons/#post-5886111)
 * Status: resolved