WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. maurocv
    Member
    Posted 3 months 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.

    https://wordpress.org/plugins/tabby-responsive-tabs/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 3 months 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
    Member
    Posted 3 months ago #

    It works! Thanks. Keep it simple!

Reply

You must log in to post.

About this Plugin

About this Topic