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

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

在您的示例 fiddle 中，您错过了按钮上的 class。应该是这样的：

<div class="button admin__add"></div>

除此之外，您需要在 .admin__add:before css

中设置字体系列

我创建了 this fiddle，以 awesome 字体为例

Answer 2

实际出现的是一种字体。

 content:"\e604";

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

所以，除非你特别指定并包含了一种字体（例如glyphicons or font-awesome, used by bootstrap) or a custom font made at sites like icomoon。它不会起作用。你需要指定字体！

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

How to properly draw an icon through text inside an element?

html

css

pseudo-element