Создание собственной иконки списка css
Я пытался найти библиотеку со всеми типами значков файлов, но пока безуспешно, поэтому мне нужно будет создать свою собственную. Идея состоит в том, что его можно будет использовать так же, как смайлики 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 для каждого варианта. Предпочтительно только тот, который соответствует высоте текста, в котором он находится.
Любая помощь будет оценена по достоинству, как и указание мне на библиотеку, о которой вы, возможно, знаете, поскольку я пока не могу найти подходящую для этой цели, поэтому мне придется сделать свою собственную.
Заранее спасибо.
Ответы 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")
}