如何将一个span的内容添加为css类并移除内容？

我需要这个:& ltspan class = & quotfooBar & gt内容& lt/span& gt。

被渲染成这样:& ltspan class = & quotfooBar content & gt& lt/span& gt。

但前提是fooBar已经作为一个类添加到span元素中，并且只使用css或scss。这可能吗？

编辑:因为这似乎是不可能:

我们使用材料图标，现在我们的UI/UX设计团队想使用自定义图标。正因为如此，我们创造了自己的图标字体，我们想要实现的是，在使用图标上没有区别。

通过材料图标库(https://github.com/marella/material-icons ),我们可以使用:

span class="material-icons-outlined">
    add/span>
    

然后它会以图标的形式出现。

即使我已经创建了字体，它现在唯一的工作方式是如果我把我想用的图标作为一个类而不是内容，即使我在css中重新创建了字体，就像他们在材料图标库中所做的那样。

我们想要的:

span class="company-icons">
    custom/span>

我不知道如何像他们一样做这件事。

这是fantasticon生成的代码:

我必须添加的这段代码，因此spans完全可以工作:

请忽略红色下划线，我改成了公司名，用原来的名字，文件找到了。

用法:

下面的能用，上面的不行。

你可以使用JS来选择你想要的HTML元素。接下来，您将在JS中执行您想要的逻辑。

// Select all elements you want to transform (a class would be the most logic way)let icons = document.querySelectorAll('.icon')// Loop each iconicons.forEach(function(icon) {
        // Add the innertext as a class    icon.classList.add(icon.innerText);
        // Empty the current innertext    icon.innerText = ''}
    )

div class="not-a-icon">
    Programming/div>
    div class="icon">
    is/div>
    div class="icon">
    fun!/div>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！