Extending and Customizing Social Icons in Solo's Sub-Theme

Thank you so much for your kind words and Salam! I'm happy to hear that you're enjoying the theme.
The Solo theme incorporates social icons through a Twig file, assigning unique background color variables to each icon. To customize or override these icons, you must override the Twig template within a sub-theme. I've developed a sub-theme → that introduces three additional social icons, offering a practical example for your project or as a foundation for further sub-theme creation. Here's a summary of the steps involved:

1. I duplicated page.html.twig and modified the footer menu inclusion to reference the same theme's file.
2. Transferred _footer-menu.html.twig into the sub-theme, adjusting the inclusion path to source files from the sub-theme.
3. Migrated the SVG folder into the sub-theme for direct access.
4. Converted PNG icons to SVG format and introduced variables for customizable coloring.
5. Expanded the Solo theme's icon set by adding three new icons.
6. Integrated the new icon variables within the preprocess page hook for dynamic theme adjustments.

Best wishes,
Alaa

Choukran Alaa,

You're amazing, and such a nice person...

I have a little inconvenient though.... content of nodes show narrow in the middle of front page... I have cleared cache, uninstalled and erased the sub-theme to re-install it... the see the images...

Another thing that I don't know if it's an issue, I had to go setting the theme section by section, I mean set a section save changes and then set another section, otherwise settings were lost....

Sorry Alaa,
already fixed, I don't know why in the reading mode was the basic page selected, diselecting it solved the problem...

Quick question...
how do I change the background-color for icons when hovered?

Hello,

Feel free to incorporate this into the sub-theme by adjusting the color to your preference:

.sm-icon:hover svg {
fill: red!important;
background-color: blue;
border-radius: 50%;
}

Best wishes,
Alaa

Choukran, thousand times!!!

I couldn't take the black border out when hovering but I got a nice effect adding a transparent fill

.sm-icon:hover svg {
fill: rgba(255,255,255,0.5) !important;
background-color: purple !important;
border-radius: 50%;
}

You are welcome, here is the code to remove the border:

.sm-icons a > span {
  border: none!important;
}

Best wishes,
Alaa

Thanks Alaa..

There was a thin border anyway, so the only way I could find to make it disappear completely was combining the codes and using the same background-colour as the background-colour where the icons are:

.sm-icon:hover svg {
fill: #800080 !important;
background-color: #deddda !important; /* this is the colour I'm mentioning */
border-radius: 100%;
}

.sm-icons a { span {
  border: none !important;
}}