使用 Font Awesome 自定义 li-element - 有点复杂的情况

Question

我想使用 Font Awesome 图标作为特定（选择的）li 元素（具有特殊 "active" class）的无序列表菜单中的项目符号。

我知道，使用 before/after 伪元素很容易，就像这里提出的那样：

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 中添加额外的 classes，所以 Font Awesome "native" 解决方案 (http://fortawesome.github.io/Font-Awesome/examples/#list) 也没有问题。

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

编辑：它实际上是 Wordpress Super Social 插件的社交评论部分。这是相关列表的 HTML（如您所见，他们使用内联 javascript 设置 "active" class 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 之前放一个 "pointing finger" 图标 (http://fortawesome.github.io/Font-Awesome/icon/hand-o-right/)。

编辑：使用 text-ident 并将图标的 svg-version 设置为背景图像。

Answer 1

你是说这个指针？

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；它似乎将 class 添加到列表项中，但没有将其从其他项中删除。所以你最终会得到多只手的子弹。
编辑：哦，那是因为它引用了其他地方的其他 id，这些 id 在这个片段中不存在，导致 JavaScript 失败。我现在添加了它们，所以你可以看到例程的工作。

使用 Font Awesome 自定义 li-element - 有点复杂的情况

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

css

html-lists

font-awesome