Title: Adding SVG icon
Last modified: August 21, 2016

---

# Adding SVG icon

 *  Resolved [Hammal Albulushi](https://wordpress.org/support/users/hammal/)
 * (@hammal)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/adding-svg-icon/)
 * Hello
 * I want to add icons on the title from the following plugin
    [https://wordpress.org/plugins/svg-vector-icon-plugin/](https://wordpress.org/plugins/svg-vector-icon-plugin/)
 * I have tired the following but its not working any idea ?
 * [tabby title=” First Tab” icon=”<span data-icon=””></span>”]
 * also tired to do like this
    [tabby title=”<span data-icon=””></span>First Tab”]
 * no luck
 * [https://wordpress.org/plugins/tabby-responsive-tabs/](https://wordpress.org/plugins/tabby-responsive-tabs/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/adding-svg-icon/#post-5079276)
 * The plugin wasn’t designed to work like that.
 * It can add the classes for the Font Awesome webfont set if you use a plugin or
   theme that includes the font awesome files or another icon font set that makes
   use of equivalent classes.
 * Other webfont sets are not directly supported, but can probably be made to work
   by using the same classes as used by Font Awesome in the stylesheet.
 * As an example, if you give the icon parameter the value “cog” in the shortcode
 * **`[tabby title="My Tab" icon="cog"]`**
 * This will add the classes **fa** & **“fa-cog** to the tab’s title. If you have
   a theme or plugin that adds Font Awesome icon font files and stylesheet to your
   site, the icon will then appear in the tab title.
 * If you want to continue using the icon plugin you mentioned, the css you need
   to add to your child theme will need to include rules some for the fa class:
 *     ```
       .fa {
         display: inline-block;
         font-family: wp-svg-plugin-icon-set1;
         font-style: normal;
         font-weight: normal;
         line-height: 1;
         font-size: 0.8em;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
       ```
   
 * Plus a single rule for each icon you want to use. For the cog icon the rule would
   look like this:
 *     ```
       .fa-cog:before {
         content: "\e08e";
       }
       ```
   
 * The optional [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/)
   add-on plugin can add the Font Awesome files for use with Tabby Responsive Tabs(
   and elsewhere on the site) and can be used without requiring any editing of theme
   files.

Viewing 1 replies (of 1 total)

 The topic ‘Adding SVG icon’ is closed to new replies.

 * ![](https://ps.w.org/tabby-responsive-tabs/assets/icon-256x256.jpg?rev=2682041)
 * [Tabby Responsive Tabs](https://wordpress.org/plugins/tabby-responsive-tabs/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tabby-responsive-tabs/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tabby-responsive-tabs/)
 * [Active Topics](https://wordpress.org/support/plugin/tabby-responsive-tabs/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tabby-responsive-tabs/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [cubecolour](https://wordpress.org/support/users/numeeja/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/adding-svg-icon/#post-5079276)
 * Status: resolved