Как правильно масштабировать и использовать иконки SVG ⇐ 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, который у меня есть на данный момент. :

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

[url=mailto:[email protected]]
[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]


.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%;
}
}

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

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

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

• Использовать фильтр: яркость(0) инвертировать(1);, чтобы сделать значки белыми.
• Настройка размеров значков непосредственно в CSS.

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

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

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


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