Tab appear as inactive(grey) when I use font-awesome for icon tab

[anamarquezz]

The first Time appears good,

but when a I change the tab to another one,

and then return to the tab with the icon with font awesome appears inactive,

[JamesLawton]

Did you ever figure this out?

[anamarquezz]

Not, I changed the user interface.

[dany-eudes]

I got the same problem.

I figure out how to center the tab icon using the following css in component style section:

    .vue-form-wizard .wizard-icon {
      height: inherit;
    }

But I cannot solve the inactive (grey) tab effect when going to next tab, include it, and going back to the previous tab. Only it's Ok for the first tab in the very first time.

I believe that is a problem with Bootstrap 4 instead with Font Awesome 5 that I'm also using too. Any help is welcome.

[dany-eudes]

Update: I cannot reproduce that in JS Fiddle using VueFormWizard, VueFormGenerator, Font Awesome and Bootstrap 4.

Maybe the conflict is in other feature from the Anthony Rappa's Laravel 5.7 Boilerplate environment, the framework I'm in.

https://jsfiddle.net/dany_eudes/a4q5ruv6/

[dany-eudes]

Update: First tab icon background color is Okay when the wizard is loaded.

I noticed that after going to the next tab from the very first tab, the <div class="wizard-icon-container" style="background-color: rgb(0, 122, 195);"> where the icon is inside and is responsible for the active color of the background, simply disappeared.

Back to the first tab doesn't resolve the anomaly because <div> no longer occurs as when the component was loaded.

From now on no active tab icon will be wrapped by the <div> responsible for the background color.

Any help will be appreciated?

[knackjason]

I just ran into this exact same problem, but figured out a way around it. The trick is to tell Font Awesome to nest the <svg> element under the <i> element, rather than replace it.

import { config, dom } from '@fortawesome/fontawesome-svg-core';
...
config.autoReplaceSvg = 'nest';
...

https://fontawesome.com/how-to-use/with-the-api/setup/configuration