带有图像的 CSS 类显示为“内容”，如何？答案

【问题标题】：CSS class with images show as 'content', how?带有图像的 CSS 类显示为“内容”，如何？
【发布时间】：2014-04-17 12:03:50
【问题描述】：

我在这里有一些疑问，我试图找到关于“如何”的教程或示例，但我找不到任何。

我对 css 有很好的了解（不是专业的，但我明白），在使用一些模板或教程时，我在网站上看到了一些平面图标，当我去 css 课程时，我发现了一些东西像这样：“example:before { content: "\e00a"; }"

我想知道它是怎么做的？如何将其更改为另一个图标？甚至，我怎样才能基于相同的过程创建另一个“平面图标”？

如果有人可以帮助我，请。

谢谢

【问题讨论】：

标签： css

【解决方案1】：

例如，您可以将 content 属性用于图标。 \e00a 例如指这个字符：

它可以作为列表项的要点：

li:before {
    content:'\e00a'
    padding-right:12px;
}

有些字体带有像found here 这样的字符。例如，您可以使用\f042 之类的字符来显示屏幕对比度符号。但是，您需要先下载字体才能使用它。阅读更多关于@font-face here

【讨论】：

【解决方案2】：

您正在寻找font icons。这为您提供了可缩放的矢量图标，可以使用 CSS 自定义大小、颜色、阴影等。 -- Font Awesome

这是一个很好的例子。

【讨论】：

【解决方案3】：

使用预定义的 CSS 文件，例如“fontawsome”或“glyphicons”（Google It）。然后使用他们的 css 类，如 <i class="fa fa-facebook"></i> 这将显示 facebook 图标。

【讨论】：