Создание ярлыков, которые находятся поверх другого div

Question

Я занимаюсь созданием пользовательской информационной панели и хотел бы иметь метки с числом чисел для каждой метки. То, что я пытаюсь выполнить, можно увидеть на изображении ниже.

Я использую flaticon.com иконка с любыми бутстрэпами «ярлыком» или стилем «значок».

Может ли один из вас квалифицированных инвалидов показать мне в правильном направлении.

Вот что выглядит мое.

И вот мой код (HTML & CSS):

<span class="flaticon-cloudstorage10 lg"><span class="label label-default">2</span></span> 

.label.label-default { 
position: absolute; 
text-align: center; 
top: 9px; 
right: 7px; 
padding: 2px 3px; 
line-height: .9; 
} 

.flaticon-cloudstorage10.lg:before { 
font-size: 20px; 
padding-left: 10px; 
position: relative; 
} 

Вот что я получаю после добавления позиции: по отношению к flaticon.

Спасибо за ваше время!

Answer 1

что такое css свойства flaticon-cloudstorage10 lg?

Имеет ли он {position: relative;}? Если нет, вы можете попытаться поместить это свойство.

Answer 2

Я понял. Мне нужно было добавить позицию: по отношению к div, который держал мой flaticon's, а не к самим иконам. Спасибо JKC за то, что указали мне в правильном направлении.

Вот окончательный вид.