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）或在icomoon等网站上制作的自定义字体。不起作用。你需要指定font-face！

Answer 2

在您的示例小提琴中，您错过了按钮上的课程。它应该是这样的：

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

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

中设置font-family

我使用font awesome作为示例创建了this fiddle

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

2 个答案: