创建自定义列表图标 css

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

Creating custom list icon css

html

css

icons

cdn

list