Created
April 8, 2020 22:15
-
-
Save wpacademy/b55ee5340c9ca989df6f640ffcaa4121 to your computer and use it in GitHub Desktop.
Add icons to default elementor tabs widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------------------------------------------- | |
* Elementor default tab widget does not have an option to use icons for tabs at the moment. | |
* But it will be too much to install a 3rd party addon just for a tabs widget to have icons in tabs.\ | |
* We can add icons to default widget with just a little bit of CSS code. | |
* Copy below CSS code and add it your theme's stylesheet file or you can add it through Appearance > Customize > Additional CSS | |
* ------------------------------------------------------------------------- | |
* Always use a custom class on any widget that you are going to customize | |
* We are using ".wpac-tab-icons" class on tabs widget | |
* ------------------------------------------------------------------------- | |
*/ | |
.wpac-tab-icons .elementor-tab-title a::before { | |
display: inline-block; | |
font-style: normal; | |
font-variant: normal; | |
text-rendering: auto; | |
-webkit-font-smoothing: antialiased; | |
margin-right: 5px; | |
font-family: "Font Awesome 5 Free"; | |
font-weight: 900; | |
} | |
/* | |
* Every tab has a unique ID, we will use those IDs to add different icons on each tab | |
* You can get those IDs by inspecting element on the page | |
*/ | |
.wpac-tab-icons #elementor-tab-title-8381 a::before { | |
/* Ths is the Unicode value of FontAwesome Icons, you can get it from https://fontawesome.com/icons */ | |
content: "\f05a"; | |
} | |
.wpac-tab-icons #elementor-tab-title-8382 a::before { | |
content: "\f144"; | |
} | |
.wpac-tab-icons #elementor-tab-title-8383 a::before { | |
content: "\f059"; | |
} | |
.wpac-tab-icons #elementor-tab-title-8384 a::before { | |
content: "\f086"; | |
} |
I think this is now supported natively with containers https://elementor.com/help/tabs-with-nested-containers/
Be sure to activate Nested Elements first in Settings > Features
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Team,
Adding to this solution:
I also noticed that you can literally paste svg code into the Tab's "Title" field, it works great actually. (So it's actually inline, so it loads just a bit faster than an external file). See here: