Custom Icon Nucleo and :focus navgiation button

[Raabe-Verlag]

Hi,

i have 2 short questions that I hope you guys can help out with.

1- We would like to place the attached Icons (from the nucleo set) after the text in two buttons but cant seem to find them in the list of icons supported by the theme. Any chance you can support us with this?

2-For some reason the button in the navigation gets the accent colour when :focus. I can’t seem to be able to change that via custom css.
I tried the following code but it doesnt seem to have any effect

a.sf-button.standard.green.default.sf-button-rounded.sf-button-has-icon:focus {
color: #2f3739 !important;
}

Thanks in advance!

Regards

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Apologize for the delay.

Try this custom css instead.

nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item.mega-toggle-on > a, nav > .mega-menu-wrap ul.mega-menu > li:hover > a:not(.sf-button), nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item > a.mega-menu-link:focus {
    color: #2f3739!important;
}

Will sent it to the development team to see if it’s possible to include those icons.

-Rui

[Raabe-Verlag]

Hi Rui,

thank you for the code. It worked liked a charm!

Any news on the Icons yet?

Other than that I do have 3 other small minor issues that i would like your assistance with:

– Smooth Scrolling is not working on the site for some reason. It is activated in the theme settings but doesn’t seem to work in the front-end. Any ideas why?

– The Borders between the icon boxes of the Icon Grid Box seem to disappear on mobile. Any chance we can make them visible again?

– Is there any chance to add the Icon fa-cloud-download in a button after the text in the Promo bar?

Thank you in advance

Regards

[David Martin – Support]

Hi,

Regarding the icons, if you choose the Icon Box Icon Type => Image, you can simply upload your PNG file.

1) I see a jQuery error in the console log. It’s not our policy to disable plugins on customer’s sites as we don’t want to disable anything that is crucial, so we ask that you could disable all plugins leaving only Swift Framework and WooCommerce active. Please also update the Swift Framework plugin.

2)

@media only screen and (max-width: 767px) {
.spb_icon_box_grid[data-columns="4"] .spb_icon_box:nth-child(-n+4) {
    border-top-width: 1px;
}
}

3

.sf-promo-bar.promo-button a.sf-button:after {
  content: "\f0ed";
  font-family: fontAwesome;
  margin-left: 10px;
}

[Raabe-Verlag]

Hi David,

thank you both 2 and 3 worked great.

Regarding the Icons: The idea was to add the icons to buttons and not Icon boxes.
Rui suggested that he will send the info to the development team and ask them if they could include the two items mentioned above. I just wanted to ask if he’s heard back from them.

Regarding jQuery: it won’t be possible to deactivate any plugins at this time. Currently in the middle of a migration and site finalization. I will get back to you once that is over with.

Thanks

[Swift Ideas – Ed]

Hi Raabe,

Apologies for the delay.

The only current way to do that in buttons would be to use HTML at this point. If you grab the HTML for a button from the live source, then you can add it in the backend to the text editor, or the page builder element and then add the icon next to the text as you like.

Hope that helps.

Ed

[Raabe-Verlag]

Thanks for the help. Issues have been resolved.
I added the Icons via custom.css

Thanks

[David Martin – Support]

Thanks Ed.

Be sure CSS changes are either in your child theme or Theme options => Custom CSS.

– David