Font-awesome：它如何使用 class 名称来影响其内容？

Question

我正在尝试构建一个可以使用 classname 作为其数据的程序（即如果 class="hero-banner-80" 我可以使用 80 作为它的宽度）我想知道 font-awesome 是怎么做到的？它使用它的 class-name 来决定在它的元素中放置哪个字符，阅读 src 代码对我没有帮助。

Answer 1

每个图标都使用伪类，内容是图标的unicode。图标的大小由父级的字体大小继承。

Answer 2

你要的只是基本的CSS:

.hero-banner-40 {
    width: 40px;
}

.hero-banner-60 {
    width: 60px;
}

.hero-banner-80 {
    width: 80px;
}

Answer 3

没有办法动态解析 class 并根据它的某些部分和任意值生成规则，就像您似乎想做的那样。但是您可以将宽度放在数据属性中，如下所示：

<div class="hero-banner" data-width="80px">

[data-width] {
    width: attr(data-width);
}

Font-awesome：它如何使用 class 名称来影响其内容？

Font-awesome: how does it use class names to affect its content?

html

css

less

font-awesome