genesis tabs

[DigitalSuit]

Hello everyone, sorry for the messy post

theme: Parallax Pro
plugin: Genesis Tabs

I'm interested in replacing the anchor of the tab with an Icon
unfortunately I cannot share the URL since the site is hosted on my computer
however I'm almost certain I need to manipulate the JS files

anyone knows how to do that ?

this is how the HTML looks like (the specific section)

<div class="widget-wrap"><h4 class="widget-title widgettitle">HEADLINE</h4>

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">

<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="cat-4" aria-labelledby="ui-id-1" aria-selected="true"aria-expanded="true">----THIS IS WHAT I WOULD LIKE TO REPLACE WITH AN IMAGE/ICON------ANCHOR TEXT-------------------

<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="cat-3" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">ANCHOR TEXT<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="cat-5" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">ANCHOR TEXT<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="cat-6" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false">אנשים נ?‘?—רים<div id="cat-4" class="ui-tabs-hide post-32 post type-post status-publish format-standard has-post-thumbnail category-4 entry ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block;"><p>CONTENT[קרא ע?•?“...]</p></div><!--end post_class()-->

<div id="cat-3" class="ui-tabs-hide post-30 post type-post status-publish format-standard has-post-thumbnail category-3 entry ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="true" style="display: none;"><p>CONTENT</p></div><!--end post_class()-->

<div id="cat-5" class="ui-tabs-hide post-34 post type-post status-publish format-standard has-post-thumbnail category-5 entry ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;"><p> CONTENT [קרא ע?•?“...]</p></div><!--end post_class()-->

[WhiteleyDesigns]

It is quite difficult to give a direct answer without seeing the site, but my initial thought would be to use CSS and the pseudo :before element to add the icon with CSS ( see Font Awesome ). Then you would use some more CSS ( like text-indent ) to move the text out of the visible area.

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[Author]

Posts