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

Question

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

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

显示的文本会很短(最多约 9 个字符，字体大小约 10 像素)。它应该有静态的高度和宽度。此外，文本必须写在标签中(例如或

)，以便 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%;
}

截图