Question

我是网络开发的新手（并且自学成才），请原谅这是一个愚蠢的问题。

如何在图标中显示文字？比如内心的数字等。我为此假设webfont图标不起作用？使用CSS形状是否更适合这样的目的 - 以便在调整大小等时它会呈现？或者是矢量更好的选择。

这是我计划使用的心脏CSS。但我不清楚如何在里面显示文字。

    .heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #fc2e5a;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
           -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
             -o-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    .heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
           -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
             -o-transform-origin: 100% 100%;
                trans.orm-origin :100% 100%;
}

提前致谢！

Answer 1

Here是我的解决方案

我在span标记之间插入了div。这样，就像mbratch所说，你可以将z-index属性设置为更高的值。这与position:absolute一起将为您提供所需内容。

我使用jQuery垂直居中，以防你需要多行文字

如何在图标中显示文字

1 个答案: