Need a Tabs Stack with icons and text that change color when active

[forteweb (Michael Forte)]

Hi all,

I have many different stacks for creating tabs but I can’t find any of them that will allow me to add a custom icon for active and inactive states. For example, I want a black background with white icon and white text on the active tab with the other tabs containing a white background with black icon and black text. When I click/hover over another tab, then the colors should change accordingly.

I’m seeing tab stacks where you can do this with the text but I don’t see anywhere I can load in two icons (active and inactive) and have those called up accordingly. All options seem to only allow one icon regardless of button state. Also, I can’t use Font Awesome icons for what I am doing.

Can someone point me to a possible way of doing this using a stack or code?

Thanks,
Mike

[habitualshaker (Stuart Marshall)]

I think Simple Tabs by 1LD can do what you need: https://www.onelittledesigner.com/rapidweaver-stack/simple-tabs/

You don’t need to load 2 icons anyway. It would just be a case of picking up the different font colours of active/inactive. The stack I mention certainly does this.

[NeilUK (Neil)]

I’m pretty sure Switcher from @willwood can achieve what you’re looking for.

You can download a free demo version to see what it can do.

[forteweb (Michael Forte)]

I tried Switcher but it couldn’t do it. I’m now trying out cleanTabs which can’t do it straight out of the box but I’m thinking some creative CSS would be able to swap out images depending on the active state of the tab. I have a support ticket open with 1LD to see if they know how to do it. Once I get this figured out I’ll pass on the knowledge.

Thanks for the help!
Mike

[NeilUK (Neil)]

According to your original post, this is what you’re after. You change the colours of everything in Switcher. You can also change the look and size of the tabs to look like Bootstrap tabs.

[forteweb (Michael Forte)]

That is what I’m trying to do but I believe that only works with Font Awesome. Am I mistaken? Is there a certain format I can put an icon in where it will behave this way?

[NeilUK (Neil)]

I didn’t read the part where you can’t use Font Awesome, oops.

I’m not sure of a solution that doesn’t use FA.

[forteweb (Michael Forte)]

And that’s where I’m running into the problem. It’s quite frustrating but I would think a ‘simple’ addition to these tab stacks to deal with custom icons should be possible.

I would like to see an option to add multiple icons with drag and drop simplicity. You could have an ACTIVE image, INACTIVE image, and HOVER image.

[willwood (William Woodgate)]

@forteweb I don’t understand what “simple addition” you want and I can’t speak for other stacks, but for Switcher you most definitely can swap-out the icons for your own. Simply double-click the tab title in edit mode. From there you are presented with the icon markup:

You can very easily delete the existing markup and replace it with the markup for your own icons or images.

Obviously though, Switcher can’t magically detect what other icon library or system you might be using, so can’t pull the required files into the webpage. You would still need to do this yourself. And you might have to tweak a few other aspects with custom CSS code. However there have been many instances in the past where users have successfully replaced the Font Awesome icons with something else, including HTML images.

The same can be done for the Accordion toggles, which are also ‘open source’ and can be edited in the stack settings:

You cannot have different tab icons for open and closed states. This is purposefully done because in tab mode, the icons sit (float) very close to the tab titles. Nearly all icons are different sizes, so you would run the risk of getting an ugly shifting effect happening each time the tab was toggled - which looks cheap and amateurish. However the colour and opacity of the icon can be changed between states, to give the illusion of the icon changing.

Font Awesome icons typically get used in stacks the most because of the lenient licensing and the responsive / retina display optimisations on offer. I am unsure your hesitation towards using Font Awesome icons, but they can work offline / behind a firewall and you do not need to buy extra stacks to make them work.

[forteweb (Michael Forte)]

I figured out how to use your own icons and add it to Font Awesome for use in these various stacks.

1. Icon must be in SVG format. Use Illustrator, or similar to create the SVG.

2. Download font awesome from fontawesome.com and follow the directions for installing it to your own server. It’s really as simple as dragging the fontawesome-all.js file to a place on your server and then adding one line in your section to call up the file. It’s in the Getting Started section.

3. Go to IcoMoon at https://icomoon.io
   From here you can see if someone else has an icon you can use or import your custom icon into the web app. Download the Font.

4. Find the downloaded icomoon.zip file and extract it. Open the icomoon selection.json file and the fontawesome-all.js file you uploaded to your server.

5. You now want to copy some data for the icon you want to load into font awesome (the fontawesome-all.js file) from the selection.json file.

6. Scroll down in the fontawesome-all.js file until you get to “var icons = {” on line 116. Below this you will see the code for all of the font awesome icons. Each new icon starts with it’s name followed by dimensions, an ID (I think), and the code for the shape that starts with “M”.

7. Duplicate one of these icons and start replacing the data with that found in the selection.json file you previously opened.

For example, I wanted to add two icons of a plane landing and taking off. Here is the code I put in for “aircraft-take-off”.

"aircraft-take-off": [1100, 700, [], "f900", "M1017.344 330.394c6.093 13.158 6.502 66.048-250.061 186.47l-251.546 118.067c-87.552 41.114-214.579 95.181-270.592 110.131-39.219 10.445-76.646-16.179-76.646-16.179s-112.947-101.12-142.95-123.853c-29.952-22.733-27.392-34.304 11.008-46.592 23.91-7.629 160.256 25.242 218.368 39.936 68.557-40.96 131.174-76.083 160.819-92.058-71.475-52.89-205.21-151.654-247.859-181.76-40.909-28.928 0.512-39.322 0.512-39.322 18.842-5.069 59.494-11.674 79.974-7.373 139.315 29.133 371.866 106.035 389.683 111.923 42.598-22.323 108.954-55.91 149.606-75.008 106.24-49.869 221.542-1.894 229.683 15.616z"],

and here is the code I copied from in selection.js

  "icon": {
    "paths": [
      "M1017.344 330.394c6.093 13.158 6.502 66.048-250.061 186.47l-251.546 118.067c-87.552 41.114-214.579 95.181-270.592 110.131-39.219 10.445-76.646-16.179-76.646-16.179s-112.947-101.12-142.95-123.853c-29.952-22.733-27.392-34.304 11.008-46.592 23.91-7.629 160.256 25.242 218.368 39.936 68.557-40.96 131.174-76.083 160.819-92.058-71.475-52.89-205.21-151.654-247.859-181.76-40.909-28.928 0.512-39.322 0.512-39.322 18.842-5.069 59.494-11.674 79.974-7.373 139.315 29.133 371.866 106.035 389.683 111.923 42.598-22.323 108.954-55.91 149.606-75.008 106.24-49.869 221.542-1.894 229.683 15.616z"
    ],
    "attrs": [
      {}
    ],
    "isMulticolor": false,
    "isMulticolor2": false,
    "tags": [
      "aircraft-take-off"
========

I hope this helps some of you who may have that custom icon you would like to control within font awesome. One thing I forgot to mention is that the first two numbers specify the dimensions of the space that the icon will take up without changing the aspect ratio of the icon itself, i.e., it appears padding is added around the icon based on the numbers used. Also, it seems that the smaller the numbers, the larger the icon. Maybe somebody understands how that works. Anyway, I just played around with the numbers until it looked good on my site.
As for the ID, I don’t understand the naming convention for it except it looks like they are all 4 digits and start with the letter f. I just made up my own number where you can see I assigned an ID of f900.

Well, that’s all I have on this. If you have any questions I’ll try to answer them but I just learned this myself.

Mike

Edit: I almost forgot add that the code I used to generate the icon is as follows:

<i class="fas fa-aircraft-take-off" data-fa-transform="up-4"></i>

<i> is the tag
data-fa-transform takes the icon and shifts it up by 4/16em. It was a bit low so you can actually nudge it around. There are instructions for that on fontawesome.com