Как показать значок со значком на кнопке jQuery (мобильный) во всех типах браузеров ⇐ CSS

[Anonymous]

Следуя решению в этом посте, как показать значок в меню, я создал значок, в котором контент является URL -адресом значка SVG. Родительский элемент отображается в линейном блоке с положением: относительно. < /P>

Код: Выделить всё

.button::after  {
content: url("path/to/SVG");
position:absolute;
top:4px;
right:0px;
display:inline-flex;
min-width:16px;
height:16px;
justify-content: center;
text-align:center;
color: white;
border:1px solid red;
border-radius:10px;
background: red
}

Без отображения: inline-flex и useify-content: center Все браузеры показывают значок (красный круг) в правильном положении, но значок находится за пределами значок. После добавления этих двух свойств Firefox показывает значок, идеально центрированный, в то время как Edge, Chrome и Safari больше не показывают значок. Я также попробовал также место для места: Центр без эффекта. Проверка элемента в инструментах разработчика показывает Flexbox в нужном месте на значке во всех браузерах.
Редактировать:
Я получил один шаг впереди после поиска этого поста: inline svg исчезает с Flexbox. Мой SVG имеет свойство ViewPort , но нет ширины . Если я вставлю это в SVG, браузеры снова отображают значок. Align -Itmes: Center; возвращает значок обратно на значок, но центрирование намного лучше в Firefox, чем в Edge и Safari - где позиция значка по -прежнему зависит от родительского элемента. Это оставляет у меня два вопроса: < /p>

• Ручная вставка свойства ширины в каждый SVG, который я использую, не очень удобна. Есть ли лучший способ достичь этого через CSS (в то время как значок-это псевдоэлемент :: после )?
• Как я могу улучшить центрирование значка внутри Значок для сафари и края?

Подробнее здесь: https://stackoverflow.com/questions/793 ... wser-types