在 css 中使用 FontAwesome 或 Glyphicons ：before

发布于08月12日

当使用:before伪元素时，有没有办法在CSScontent:元素中嵌入HTML？

我想在这样的用例中使用令人敬畏的字体(或字形图标):

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

其中X大约是<i class="icon-cut"></i>.

当然，我可以在HTML中手动完成这项工作，但我真的想在这种情况下使用:before.

同样，有没有办法将<i>作为列表项目符号使用？这可以工作，但对于多行项目符号项目行为不正确:

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

推荐答案

你所描述的其实是FontAwesome已经在做的事情.他们将FontAwesome字体系列应用于任何元素的::before个伪元素，这些元素的类以"icon-"开头.

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

然后，他们使用伪元素::before将图标放置在具有类的元素中.我刚刚转到http://fortawesome.github.com/Font-Awesome/并判断了代码，发现了以下内容:

.icon-cut:before {
  content: "\f0c4";
}

因此，如果您希望再次添加图标，可以使用::after元素来实现这一点.或者，对于问题的第二部分，您可以使用::after伪元素插入项目符号字符，使其看起来像列表项.然后使用绝对定位将其放在左侧，或类似的位置.

i:after{ content: '\2022';}

在 css 中使用 FontAwesome 或 Glyphicons ：before

推荐答案

Css相关问答推荐

无法瞄准元素

如何改变图标的 colored颜色时悬停在

如何在Ionic上更改输入的浮点数名称 colored颜色？

Angular 17 Animation -在幻灯片左/右两侧同步

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%，如果溢出，还可以zoom 父元素

react native 容器样式

在GRID-TEMPLATE-ROWS中设置最大行数：Repeat()

如何使2个元素的宽度相同？

为什么：focus 会覆盖：focus-visible ？

css ：：part 伪 Select 器 Chrome 兼容性？

CSS 字符串变量的正确null值是多少？

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

我怎样才能在某些区域制作一个单独的文本行，而在其他区域制作一个实心填充？

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

bootstrap 模式对话框中的谷歌 map 自动完成结果

固定元素在 Chrome 中消失

为什么 .class：last-of-type 不能按我的预期工作？

如何使内容出现在固定的 DIV 元素下方？

如何在 CSS 中绘制一个圆形扇区？

CSS中伪元素前的&是什么意思？