Два svg изображения в одном ::before элементе?

Question

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Как можно разместить два svg изображения в одном ::before элементе (li)?
Мой код, но как-то не удаётся.

.whatsvib::before {
  background: url('../images/viber.svg'), url('../images/whatsapp.svg');
  background-repeat: no-repeat no-repeat;
}


.header_top_section_li::before {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  margin-right: 4px;
}

Вот как должно получиться:


А получается:

Comments

[Pavel Kuzyakin]

склейте в редакторе два изображения в одно шириной 40px, потом его подкладывайте в before с шириной 40px, зачем выдумывать-то? :-)

[Andrey Suha]

Pavel Kuzyakin, или как вариант использовать after и before

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Pavel Kuzyakin, клеить лень, честно говоря)

[Роман]

Главной - width: 40px

Answer 1

[Lord_Dantes]

Ахахахаха, а нельзя в тэг иконками вставить как бы ок да

Comments

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

Иконки вайбера ни в каком шрифте не имеется. В нем и вся загвоздка, была.

[Lord_Dantes]

Чип, font-awesome ?

[n6jWER33E33jSK8s n6jWER33E33jSK8s]

slave, ух ты! в FA5 имеется всё что мне нужно, почему-то не обращал внимание на эту версию.

Answer 2

[lamer350]

Вам же нужно второе изображение сдвинуть на ширину первой иконки по горизонтали, так как получается одна иконка перекрывает другую.

Answer 3

[Артём Пешков]

Изображения нужно еще спозиционировать, чтобы они не ложились одно под другое. Типа вот так:
background:
url(top.png) top 0px left 0px no-repeat,
url(bottom.png) top 0px left 16px no-repeat;