css - 使用Font Awesome定制li-元素-有点复杂的情况

我想使用Font Awesome图标作为特定（选定）锂元素（具有特殊的“活动”类）的无序列表菜单中的项目符号。

我知道，使用此处提出的伪元素之前/之后很容易：


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


但是我的问题是，我已经在该li元素上使用了伪元素之前和之后，所以这对我不起作用。而且我无法向ul / li-elements中添加其他类，因此Font Awesome的“本机”解决方案（http://fortawesome.github.io/Font-Awesome/examples/#list）也毫无疑问。

我的问题是：还有第三种方法吗？提前致谢！

编辑：实际上是Wordpress Super Social插件的社会评论部分。这是有问题的列表的HTML（您可以使用内嵌javascript设置“活动”类theChampSelectedTab）。

<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>

我只想在活动选择（.theChampSelectedTab）li之前放一个“手指”图标（http://fortawesome.github.io/Font-Awesome/icon/hand-o-right/）。

编辑：可以使用文本识别并将图标的svg版本设置为背景图像。

最佳答案

这个指针是什么意思？

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>

SVG来自GitHub上的以下站点：https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
由于以下问题，我找到了它：Extracting SVG from Font Awesome

但是我不确定JS。它似乎将类添加到列表项中，而不是将其从其他项中删除。因此，您最终需要多动手才能获得子弹。
编辑：哦，那是因为它引用了其他代码段中不存在的其他ID，从而导致JavaScript失败。我现在添加了它们，因此您可以看到常规的作品。

关于css - 使用Font Awesome定制li-元素-有点复杂的情况，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36987106/