Okay
  Public Ticket #2725453
Vertical Material Tabs Icon/Image before text
Closed

Comments

  •  1
    JacobBuchhave started the conversation
    March 19, 2021 at 9:17am

    Hi,

    I'm currently working on a site for a client and I want to add a custom image icon before the text of each tab. The theme only allows me to add a icon from the Icon library, but my client have some custom icons that they would like to add. I've thought about making a custom icon pack with my clients icons or another way to add the images before the text? Any help please :) 

  •  1
    JacobBuchhave replied
    March 19, 2021 at 9:17am

    Here's an image of the frontpage

  •  2,962
    Andrew replied
    March 19, 2021 at 9:35am

    Hi Jacob,

    You can add icon on the tabs in the tab settings elements shown below:

    6695337075.png

    Adding custom icons is however not possible at the moment.

    Thanks.

  •  1
    JacobBuchhave replied
    March 19, 2021 at 11:50am

    And there is now way to add a custom picture even using some code? 


  •  8,847
    Tahir replied
    March 19, 2021 at 7:04pm

    Yes, custom picture can be added using code. 

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .tabbed[data-style="vertical_modern"] .wpb_tabs_nav li:nth-child(1) a:before {
    content: "";
    width: 40px;
    height: 40px;
    position: relative;
    background: url(https://virkplan.com/wp-content/uploads/2021/03/icon-forandringsproces-square-200.png);
    background-size: 40px;
}
.tabbed[data-style="vertical_modern"] .wpb_tabs_nav li:nth-child(2) a:before {
    content: "";
    width: 40px;
    height: 40px;
    position: relative;
    background: url(https://virkplan.com/wp-content/uploads/2021/03/icon-forandringsproces-square-200.png);
    background-size: 40px;
}
.tabbed[data-style="vertical_modern"] .wpb_tabs_nav li:nth-child(3) a:before {
    content: "";
    width: 40px;
    height: 40px;
    position: relative;
    background: url(https://virkplan.com/wp-content/uploads/2021/03/icon-forandringsproces-square-200.png);
    background-size: 40px;
}
.tabbed[data-style="vertical_modern"] .wpb_tabs_nav li:nth-child(4) a:before {
    content: "";
    width: 40px;
    height: 40px;
    position: relative;
    background: url(https://virkplan.com/wp-content/uploads/2021/03/icon-forandringsproces-square-200.png);
    background-size: 40px;
}
.tabbed[data-style="vertical_modern"] .wpb_tabs_nav li:nth-child(5) a:before {
    content: "";
    width: 40px;
    height: 40px;
    position: relative;
    background: url(https://virkplan.com/wp-content/uploads/2021/03/icon-forandringsproces-square-200.png);
    background-size: 40px;
}

    Thanks


    ThemeNectar Support Team 

  •  1
    JacobBuchhave replied
    March 20, 2021 at 7:53am

    This is perfect! Thank you so much!!