Question

我一直试图找到一个包含所有不同类型文件图标的库，但到目前为止没有成功，因此我将需要创建自己的库。这样做的想法是，它可以与emoji CSS一样用于显示文件图标，因为它比单个列和DIV的需要容易得多。理想情况下，我可以执行<i class="em-filetype"></i>来显示它。

下面是我打算如何解决此问题的一个示例。

.em,
.em-png {
	height: 1.5em;
	width: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle
}

.em--psd {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}

<i class="em--psd"></i>

我最终将所有图像托管在自己的服务器上，以便可以使用。我只需要一种使这项工作有效的方法，这样便可以为每个变体编写CSS。最好只有一个与之匹配的文本高度。

任何帮助将不胜感激，因为将我引向您可能知道的图书馆，因为到目前为止我找不到合适的图书馆，所以必须自己做。

谢谢。

Answer 1

您要么需要对元素应用两个类。 <i class="em em--psd"></i>

或

调整选择器：

[class^="em-"],
[class*=" em-"],
.em-png {
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle
}

.em--psd {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}

创建自定义列表图标CSS

1 个答案: