SVG social icon formatting problem - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 13, 2025 at 5:58 pm #1490142
zimbo
Participant
I’m trying to migrate to SVG social icons as per the recommendation in Theme Options. I have changed X and Instagram on the ‘dev’ test site (see below) and you can see the problem with SVG versions – too ‘low’ and wrong color.

The fix for the lowered icons is, I think:
```
#top .social_bookmarks li.avia-svg-icon svg:first-child {
    margin-top: 6px;}
```
from the default of 9px – please confirm this is the right CSS to target to get the SVG icons higher.

I cannot however find the code that is making the SVG icons display grey (#808080, the secondary font color) instead of blue.

I have this CSS in my child theme style.css to change the old/existing icons to the site’s main blue colour:
```
.header_color .social_bookmarks a {
	color: #2e3192 !important;}
```
This code is still being loaded but is being ignored by the SVG icons. How can I get the SVG icons displaying blue?

[There is additional CSS to format the social icons, as below, but I don’t think this is relevant, it’s just FYI:
.html_bottom_nav_header #top .av-logo-container .social_bookmarks {
right: 83px; margin-top: -30px;}

#top .social_bookmarks li {
width: 36px;}

#top .social_bookmarks li a {
font-size: 20px;}
]
October 14, 2025 at 5:42 am #1490156
Ismael
Moderator
Hey zimbo,

Thank you for the inquiry.

This css should adjust the alignment of the social svg icons.
```
#top .social_bookmarks li.avia-svg-icon svg:first-child, #top .social_bookmarks li.avia-svg-icon img[is-svg-img=true] {
    height: 1em;
    width: auto;
    margin-top: 6px;
}
```
Then, add this css rule to change the color to blue.
```
.header_color .team-social a.avia-svg-icon svg:first-child, .header_color .meta-heading .avia-svg-icon svg:first-child, .header_color .social_bookmarks .avia-svg-icon a svg:first-child {
    stroke: #2f3191;
    fill: #2f3191;
}
```
Best regards,
Ismael
October 14, 2025 at 6:08 pm #1490216

zimbo
Participant

Thanks, that works.

Presumably I can now delete the previous color change statement of “.header_color .social_bookmarks a” ?

October 15, 2025 at 7:00 am #1490227

Ismael
Moderator

Hi,

Yes, you can now remove that css rule or replace it with the modification we provided above. Let us know if you have more questions.

Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.