Support » Fixing WordPress » How to create tabs with icons on each tab?

  • I’ve been searching for hours and can’t seem to find anything. Tried a bunch of plugins but still nothing.

    How can I create four tabs for content on a page with a little icon (image) next to the title on each tab?

    Help is much appreciated as always.

    -Tony

Viewing 15 replies - 1 through 15 (of 32 total)
  • So I guess this is not possible?

    If your navbar is an image just add icons and adjust as needed. Tedious but possible

    What do you mean? I’m not looking to use a navigation bar… I just want tabs (with icons on them) to seperate content on one specific page.

    Can someone PLEASE tell me how to do this?

    Can anyone at least point me in the right direction as to how to learn how to do this?

    Is there a new way I have to ask questions in forum or something?

    If no one is going to help or point me in the right directioon then can someone at least tell me if this is or isn’t possible?

    I’ve been searching all over the web for over a week and I can’t figure out how to do this.

    Is it not possible?

    It’s definitely possible, but how easy it would be might depend on several factors.

    Firstly, are you trying to do this without modifying or adding any code to the theme or plugins? ie. Are you purely a “user” or are you capable of doing some coding yourself? If you can’t find a plugin or theme that does what you want, then you’re gonna have to write some code or get somebody to do it for you.

    If you want a starting point, I’d say that what you want is probably some CSS to add the icons to the tabs. This is assuming that you’ve at least successfully got the tabs to work. Adding icons to tabs would be very easy for most web developers (Hint: CSS background property). But then there’s the added complexity of how to choose which icons go onto which tab. Are these icons going to be pretty much fixed, or do you want the icons to be selected by the user when editing the content?

    There are a lot more questions I could ask, but really what I’m saying is that in order to give you a better answer, I’d need to know a lot more detail about what exactly you want to accomplish, and what your skill level is.

    Hope this helps a little.

    “Firstly, are you trying to do this without modifying or adding any code to the theme or plugins? ie. Are you purely a “user” or are you capable of doing some coding yourself?”
    -Not sure what you mean exactly but sure I’d prefer to do this without modifying or adding any code to the theme or plugins. I’m not just a user… I’m the admin and I think I’m capable of doing coding myself but it would probably take time for me to learn.

    “If you can’t find a plugin or theme that does what you want, then you’re gonna have to write some code or get somebody to do it for you.”
    -Any suggestions on where I can find someone to do it for me? I’ll pay them if I have to.

    “Adding icons to tabs would be very easy for most web developers (Hint: CSS background property). But then there’s the added complexity of how to choose which icons go onto which tab. Are these icons going to be pretty much fixed, or do you want the icons to be selected by the user when editing the content?”
    -All I want is four tabs with one icon on each… First tab contains the word ‘Football’ and a little football icon next to it… second, third, and fourth tab contain the words ‘Hockey’ with puck icon, ‘Baseball’ with baseball icon, and ‘Basketball’ with basketball icon.

    Anything else you can help with? Like I said I don’t mind paying someone to do this… I’m just not sure where to find the person.

    Hi Tony,

    What is the webpage where you are trying to do this?

    http://www.theifhl.com

    Page is same as the home page of that site. I simply want four tabs with icons on each tab to separate content on home page.

    Where is the four tabs on home page? I am not getting that. I saw your post at Elance.

    I don’t have the tabs… that’s what I want help with… creating those tabs (see above).

    Ok. then just need CSS changes.

    Okay, there are going to be a few different steps here.

    First, create a custom CSS like this:

    #my_tab_style {
       font-size: 28px;
       color: red;
       width: 300px;
       background-color: #000000;
    }

    You can play around with the values.

    Then, in your post where you want the tab to display, use something like:

    <div id="my_tab_style">THIS IS MY TAB</div>

    Once that works for you, let me know and I’ll explain the rest.

    Please check this link http://premiumdomainfinder.com/blog/. Sidebar have tab options. But you want to add icon for every tabs next to the title. Am I correct?

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘How to create tabs with icons on each tab?’ is closed to new replies.