Using Font Awesome to custom a li-element - a bit complicated case

Question

I would like to use a Font Awesome icon as a bullet point in unordered list menu for a specific (choosen) li-element (that has special "active" class).

I know, that it's easy with before/after pseudo-elements like proposed here:

• Using Font Awesome icon for bullet points, with a single list item element
• Custom li list-style with font-awesome icon

But my problem is, that i've already used both before and after pseudo-elements on that li-element, so that's not gonna work for me. And i can't add additional classes to ul/li-elements, so Font Awesome "native" solution (http://fortawesome.github.io/Font-Awesome/examples/#list) is also out of question.

My question is: is there a third way to do it? Thanks in advance!

edit: It's actually Wordpress Super Social plugin's social comments section. Here's a HTML of the list in question (they use inline javascript to set "active" class theChampSelectedTab as you can see).

<ul>
    <li id="theChampTabs-0-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-0').style.display='block';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';" class="theChampSelectedTab">Default Comments (2)</li>
    <li id="theChampTabs-1-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-1').style.display='block';theChampInitiateFB();document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';">Facebook Comments (<fb:comments-count href="http:my.page" fb-xfbml-state="rendered" class=" fb_comments_count_zero"><span class="fb_comments_count">0</span></fb:comments-count>)</li>
    <li id="theChampTabs-2-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-2').style.display='block';document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';">G+ Comments</li>
</ul>

I just want to put a "pointing finger" icon (http://fortawesome.github.io/Font-Awesome/icon/hand-o-right/) before the active choice (.theChampSelectedTab) li.

edit: Got it work with text-ident and setting svg-version of the icon as a background image.

Answer 1

This hand pointer you mean?

function theChampInitiateFB(){}

li.theChampSelectedTab {list-style-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm1408-576q0-51-39-89.5t-89-38.5h-576q0-20 15-48.5t33-55 33-68 15-84.5q0-67-44.5-97.5t-115.5-30.5q-24 0-90 139-24 44-37 65-40 64-112 145-71 81-101 106-69 57-140 57h-32v640h32q72 0 167 32t193.5 64 179.5 32q189 0 189-167 0-26-5-56 30-16 47.5-52.5t17.5-73.5-18-69q53-50 53-119 0-25-10-55.5t-25-47.5h331q52 0 90-38t38-90zm128-1q0 105-75.5 181t-180.5 76h-169q-4 62-37 119 3 21 3 43 0 101-60 178 1 139-85 219.5t-227 80.5q-133 0-322-69-164-59-223-59h-288q-53 0-90.5-37.5t-37.5-90.5v-640q0-53 37.5-90.5t90.5-37.5h288q10 0 21.5-4.5t23.5-14 22.5-18 24-22.5 20.5-21.5 19-21.5 14-17q65-74 100-129 13-21 33-62t37-72 40.5-63 55-49.5 69.5-17.5q125 0 206.5 67t81.5 189q0 68-22 128h374q104 0 180 76t76 179z"/></svg>');}

<ul>
    <li id="theChampTabs-0-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-0').style.display='block';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';" class="theChampSelectedTab">Default Comments (2)</li>
    <li id="theChampTabs-1-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-1').style.display='block';theChampInitiateFB();document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';">Facebook Comments (<fb:comments-count href="http://unhabited.planet.ee/peretoetused/" fb-xfbml-state="rendered" class=" fb_comments_count_zero"><span class="fb_comments_count">0</span></fb:comments-count>)</li>
    <li id="theChampTabs-2-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-2').style.display='block';document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';">G+ Comments</li>
</ul>
<!-- patch to avoid error -->
<span id="theChampTabs-0"></span><span id="theChampTabs-1"></span><span id="theChampTabs-2"></span>

The SVG was taken from this site on GitHub: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
which I found thanks to this question: Extracting SVG from Font Awesome

I'm not sure about the JS though; it seems to add the class to the list items, but not remove it from the other ones. So you end up with multiple hands for bullets.
Edit: oh, that's because it references other ids elsewhere, which didn't exist in this snippet, causing the JavaScript to fail. I added them in now, so you can see the routine works.