Как правильно масштабировать и использовать SVG-значки на боковой панели WordPress ⇐ CSS

[Anonymous]

Вопрос:
Я пытаюсь реализовать набор кнопок социальных сетей на боковой панели WordPress, используя значки SVG. Я использую тему Agama Blue (версия 1.1.5). Конкретная проблема, с которой я столкнулся, — это масштабирование значков Facebook и X (ранее Twitter) до 24x24 пикселей. Все значки имеют размер 24x24 пикселей, но все равно выглядят странно и непропорционально.
Я уже загрузил свои значки в медиатеку WordPress, и вот обобщенные URL-адреса значков:

• Значок Facebook: https://example.com/path-to-your-icons/facebook.svg
  < li>Значок X: https://example.com/path-to-your-icons/x.svg

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

• Значки Facebook и X необходимо отрегулировать пропорционально, поскольку для X они больше, чем текст, а для Facebook он очень маленький.
• Значки не должны иметь границ.
• Текст для < strong>Facebook, X и YouTube должны быть белыми.
• Вкл. при наведении курсора мыши я хочу, чтобы значки слегка увеличились в размерах вместе с кнопкой в ​​форме таблетки.

Вот код HTML и CSS, который у меня есть на данный момент. :

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

.social-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
width: 100%;
}

.social-link {
display: flex;
align-items: center;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
flex: 1 1 calc(50% - 10px);
justify-content: center;
color: white;
border: none;
transition: transform 0.3s ease-in-out;
}

.social-link:hover {
transform: scale(1.1);
}

.social-icon {
width: 24px;
height: 24px;
margin-right: 8px;
display: inline-block;
transition: transform 0.3s ease-in-out;
border: none;
}

.social-link:hover .social-icon {
transform: scale(1.2);
}

.mail {
background-color: #e0e0e0;
color: black;
}

.facebook {
background-color: #4267B2;
color: white;
}

.x {
background-color: #000000;
color: white;
}

.youtube {
background-color: #FF0000;
color: white;
}

.mail .social-icon {
filter: brightness(0);
}

.facebook .social-icon,
.x .social-icon,
.youtube .social-icon {
filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
.social-link {
flex: 1 1 100%;
}
}

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

[url=mailto:example@example.com]
[img]https://example.com/path-to-your-icons/email.svg[/img]
 Mail
[/url]
[url=https://www.facebook.com/example]
[img]https://example.com/path-to-your-icons/facebook.svg[/img]
 Facebook
[/url]
[url=https://x.com/example]
[img]https://example.com/path-to-your-icons/x.svg[/img]
 X
[/url]
[url=https://youtube.com/example]
[img]https://example.com/path-to-your-icons/youtube.svg[/img]
 YouTube
[/url]

Текущие проблемы:

• Значки Facebook и X масштабируются неправильно.
• Цвет текста для Facebook< /strong>, X и YouTube отображается серым, а не белым.
• Эффект наведения работает, но значки иногда не работают. t изменить размер пропорционально.

Что я пробовал:

• Использование фильтра: Brightness(0) invert(1);, чтобы сделать значки белыми.
• Регулировка размеров значков непосредственно в CSS.

Что мне нужно:

• Правильно масштабировать значки SVG до 24x24 пикселей без искажений.
  Убедитесь, что цвет текста для Facebook, X и YouTube — белый.
• Сделайте так, чтобы эффект наведения изменял размер кнопки и значка пропорционально.

Как я могу настроить свойства CSS/HTML или SVG, чтобы значки масштабируются правильно, а цвет текста отображается правильно?
Заранее благодарим за любую помощь!


Подробнее здесь: https://stackoverflow.com/questions/790 ... ss-sidebar