Tabby Responsive Tabs
[resolved] Tab title with icon (3 posts)

  1. maurocv
    Posted 2 years ago #

    Is this possible?

    [tabby title="<span class="fa-thumbs-o-up"></span> First Tab"]

    I've tried many ways but I couldn't make it work.


  2. cubecolour
    Plugin Author

    Posted 2 years ago #

    This is not supported with the current version of the plugin, however you may be able to add an icon via CSS the stylesheet by targeting an automatically generated id '#tablist(x)-tab(y)'

    Include the icon font eg If want to use an icon from WordPress's included dashicons set you can add the following to your functions.php:

    add_action( 'wp_enqueue_scripts', 'cc_load_dashicons' );
    function cc_load_dashicons() {
    	wp_enqueue_style( 'dashicons' );

    Then either in your child theme stylesheet or via a custom CSS plugin add the CSS rules targeting the specific tab:

    .responsive-tabs #tablist1-tab2.responsive-tabs__list__item:before {
    	content: "\f107";
    	font-family: 'dashicons';
    	display: inline-block;
    	-webkit-font-smoothing: antialiased;
    	vertical-align: top;

    It should be possible to add a more streamlined method of adding icons via a new shortcode parameter, and I may add this to a future version of the plugin or as an add-on if I ever had a specific requirement for this in one of my own projects or if someone commissioned the work.

  3. maurocv
    Posted 2 years ago #

    It works! Thanks. Keep it simple!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Tabby Responsive Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic