Title: Using Font Awesome for CSS Class
Last modified: January 17, 2018

---

# Using Font Awesome for CSS Class

 *  Resolved [majato](https://wordpress.org/support/users/majato/)
 * (@majato)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/using-font-awesome-for-css-class/)
 * Hi,
    I was hoping to use font awesome to add a different icon before each menu
   item. So, for example the font awesome website suggests something like this for
   an icon <i `class="fa fa-calendar" aria-hidden="true"></i>`
 * Putting this in to the CSS Class field doesn’t work. The nearest I got it to 
   working was adding fa fa-calendar; This resulted in the icon appearing, but unfortunately
   it then affected the font of the link.
 * Is it possible to add a font awesome icon using the CSS Class field on the Add
   Menu Item?
 * For info, I’m using “Superfish without CSS”.
 * Thanks.

Viewing 1 replies (of 1 total)

 *  Plugin Author [Andrea Tarantini](https://wordpress.org/support/users/dontdream/)
 * (@dontdream)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/using-font-awesome-for-css-class/#post-9873702)
 * Hi [@majato](https://wordpress.org/support/users/majato/),
 * You can add the icon in the ‘Name’ field, e.g.:
 * **Name:** `<i class="fa fa-calendar"></i> Example Page`

Viewing 1 replies (of 1 total)

The topic ‘Using Font Awesome for CSS Class’ is closed to new replies.

 * ![](https://ps.w.org/menubar/assets/icon-128x128.png?rev=1569441)
 * [Menubar](https://wordpress.org/plugins/menubar/)
 * [Support Threads](https://wordpress.org/support/plugin/menubar/)
 * [Active Topics](https://wordpress.org/support/plugin/menubar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/menubar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/menubar/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Andrea Tarantini](https://wordpress.org/support/users/dontdream/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/using-font-awesome-for-css-class/#post-9873702)
 * Status: resolved