如何在CSS中创建这样的图标？

Question

我需要在css中创建这样的简单图标 - 大约32x32像素。

我想尽可能简单（html - 没有不必要的div）。文本应垂直和水平对齐到每半的中心。

显示的文字很短（最多9个字符，字体大小约10px）。它应该具有静态高度和宽度。此外，文本必须用标签（如或

）编写，以便CMS可以访问。

这是我的解决方案，我发现错了，因为高度和宽度不是静态的：

jsfiddle.net/s2DRr/1 /

Answer 1

进行什么

我使用i元素来创建图标。通常使用图像或最近的图标字体，但我们可以根据您的需要进行调整。 （最初i元素并未用于图标，并且它是否在语义上是正确的。但是，它在许多图标字体和一些主要网站中使用。 ）由于您需要能够动态地将内容放在HTML中，我们可以使用i作为换行，并使用div作为第二种颜色。

代码

Working Fiddle

HTML：

<i>Top<div>Bottom</div></i>

CSS：

i {
    height:32px;
    width:32px;
    display:inline-block;
    position:relative;
    color:white;
    font-size:10px;
    background:lightgreen;
    text-align:center;
    font-style:normal;
}
i div {
    background:orange;
    position:absolute;
    bottom:0;
    height:50%;
    width:100%;
}

截图

Answer 2

您可能需要更改以下内容以更好地符合您的要求，但它应该为您提供一个不错的起点：

Sample Fiddle

HTML

<i></i>

CSS

i {
    height:32px;
    width:32px;
    display:inline-block;
    position:relative;
    color:white;
    font-size:10px;
}
i:before, i:after {
    display:block;
    height:16px;
    width:32px;
    text-align:center;
    padding-top:2px;
    overflow:hidden;
    box-sizing:border-box;
}
i:before {
    content:'text1';
    background:lightgreen;
}
i:after {
    content:'text2';
    background:orange;
    position:absolute;
    bottom:0;
}