Creating custom list icon css

Question

I've been trying to find a library with all different types of file icons, so far with no success so I'm going to need to create my own. The idea is that it'll be able to be used in the same way as emoji CSS to display the file icons as it's much easier than the need for individual columns and DIVs. Ideally I'd be able to do <i class="em-filetype"></i> to display it.

Below is an example of how I plan to go about this.

.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>

I'll eventually host all of the images on my own server so that they're available for use. I just need a way of making this work so that I can then write the CSS for each variation. Preferably just the one that then matches the height of the text it is in.

Any help would be appreciated, as would pointing me towards a library you may know about as I'm so far unable to find one fit for purpose so will have to make my own.

Thanks in advance.

Answer 1

Either you need to apply two classes to the element. <i class="em em--psd"></i>

or

Adjust the selectors:

[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")
}