内容CSS属性如何定义引导程序中的图标

Question

我只是想知道如何content: "\e005";在bootstrap css中定义心脏图标.

看看这个:

在chrome调试器中,如果我将此值更改为其他值,则此心脏图标将不再可用.这是JSbin演示,以防有人想玩它.

问:这个内容如何:"\ e0005"属性是否正在创建此图标？

编辑:

我看到一个网络调用glyphicons-halflings-regular.woff和glyphicons-halflings-regular.ttf.这是它的快照

我只A-Z|a-z|0-9在响应中看到字母和数字.下载的字体中也没有心形图标或任何其他图标.所以再次提出问题是这颗心是如何形成的？

PS:BootStrap Glyphicons页面

Answer 1

HTML中的每个元素都有:在psuedo之前和之后:.这些是浏览器在相应元素中的内容之前和之后创建的元素.您可以使用CSS定义它们.这是Bootstrap的作用.

引导CSS在<span>标记中的内容之前创建一个元素.使用该content属性,此新元素中的内容被定义为图标.

span.icon:before {
  font-family: 'Glyphicons Halflings';
  content: "\2601";
}

图标只是字体中的一个字符(Glyphicons).