如何通过元素内的文本正确绘制图标？

Question

我已经使用一种技术检查了很多按钮，其中它们的图标通过“before”伪元素由文本定义，如下所示：

element:before {
    content: "\e604";
}

该代码应该画一颗星星。

我将其添加到我的代码中，但未绘制图标。

.button {
    text-align: center;
    margin-bottom: 16px;
    margin: 0;
    padding: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23);
    border-radius: 50%;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    background-color: #00bcd4;
    position: relative;
    height: 56px;
    width: 56px;
    padding: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.button:before {
    content:"\e604";
}

http://jsfiddle.net/egeszqw6/

我该怎么做才能使图标出现？

提前致谢！

Answer 1

实际显示的是字体。

 content:"\e604";

上面的语句只会呈现与 \e604 unicode 相关的字形（或字符）。

因此，除非您特别指定并包含字体（例如glyphicons或font-awesome，由 bootstrap 使用）或在icomoon 等网站上制作的自定义字体。不起作用。您需要指定字体！