Создание собственного значка списка css - PullRequest
Новая
       13

Создание собственного значка списка css

1 голос
/ 14 июня 2019

Я пытался найти библиотеку со всеми различными типами значков файлов, но пока безуспешно, поэтому мне нужно будет создать свою собственную.Идея заключается в том, что его можно использовать так же, как 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 для каждого варианта.Желательно только тот, который соответствует высоте текста, в котором он находится.

Буду признателен за любую помощь, как если бы я указывал на библиотеку, о которой вы, возможно, знаете, поскольку я до сих пор не могу найти подходящийдля цели, поэтому придется сделать свой собственный.

Заранее спасибо.

1 Ответ

0 голосов
/ 14 июня 2019

Либо вам нужно применить два класса к элементу. <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")
}
...