Hi there,
I would like to replace the social icons in the menu with these two icons, Facebook and Instagram.
How do I do this and how can I make them the same height as the menu titles?
Staff replied
Templates
How to change social icons?
5 replies
Ariba Staff
Hello
Thank you for your query.
You will need Unicode value of the icons. Please add the following css rule in custom css section and change the unicode value (f082) with the one you want to use. Similarly you can change the instagram icon.
.fa-facebook::before {
content: "\f082";
}For same height issue: kindly use the following css rule
ul.social-icons > li {
margin: 15px 7px;
}Hope this helps you!
Knut Ingwersen Asked this
Hello Ariba,
I have entered the following:
}
.fa-facebook::before {
content: "\f09a";
}
}
.fa fa-google-plus::before {
content: "\e055";
}
Unfortunately, the icons are not replaced. What I have done wrong?
Paul Frankowski Senior Staff
googleplus > instagram
.fa.fa-google-plus::before {content: "\f16d" !important;}
F > facebook round
.fa-facebook::before {content: "\f09a" !important;}
Add inside Template Options > Custom Code > Custom CSS
Knut Ingwersen Asked this
Thank you soo much, Paul!
Paul Frankowski Senior Staff
4 years ago
· edited
You're welcome.
As German webmaster please do not use Google Fonts loaded from the Google Fonts (USA) servers, why? read here: >> https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3/google-fonts-and-dsgvo
Log in to reply.