I have realised that, as far as I am aware, there is not an option to use code injection for social media icons in Liebling. This is the code I am currently using as per available information. Note - I also have code for dropdown menus:
/* START - For Dropdown Menus in Liebling */
li.menu-item-has-children {
position: relative;
padding-right: 20px !important;
align-items: center;
display: inline-flex;
}
.gh-head-menu .nav-youtube a,
.gh-head-menu .nav-twitter a,
.gh-head-menu .nav-tiktok a,
.gh-head-menu .nav-instagram a {
font-size: 0 !important;
}
.gh-head-menu .nav-youtube a::before,
.gh-head-menu .nav-twitter a::before,
.gh-head-menu .nav-tiktok a::before,
.gh-head-menu .nav-instagram a::before {
font-family: "Font Awesome 6 Brands";
display: inline-block;
font-size: 20px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.gh-head-menu .nav-youtube a::before {content: "\f167"}
.gh-head-menu .nav-twitter a::before {content: "\f099"}
.gh-head-menu .nav-tiktok a::before {content: "\e07b"}
.gh-head-menu .nav-instagram a::before {content: "\f16d"}
li.menu-item-has-children:hover ul.ghost-submenu {
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.menu-item-has-children svg {
position: absolute;
right: 0px;
top: 60%;
transform: translate(-0%, -50%) scale(1);
}
ul.ghost-submenu li {
list-style: none;
white-space: nowrap;
margin-bottom: 0;
margin-right: 0;
width: 150px;
}
ul.ghost-submenu li a {
width: 100%;
padding: 8px 10px;
display: block;
color: #fff;
font-size: 1rem;
transition: background-color .1s linear;
border-radius: 4px;
}
ul.ghost-submenu li a:hover {
background-color: rgba(0,0,0,.1);
}
ul.ghost-submenu {
display: block !important;
border-radius: 5px;
position: fixed;
visibility: hidden;
z-index: 3;
opacity: 0;
top: 30px;
transition: 0.3s;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 14%);
max-width: unset !important;
padding: 5px 20px 10px 10px !important;
background-color: #333;
line-height: 1.4;
outline: 0;
transition-property: transform,visibility,opacity;
white-space: normal;
}
/* END - For Dropdown Menus in Liebling */
.gh-head-menu .nav-youtube a,
.gh-head-menu .nav-twitter a,
.gh-head-menu .nav-tiktok a,
.gh-head-menu .nav-instagram a {
font-size: 0 !important;
}
.gh-head-menu .nav-youtube a::before,
.gh-head-menu .nav-twitter a::before,
.gh-head-menu .nav-tiktok a::before,
.gh-head-menu .nav-instagram a::before {
font-family: "Font Awesome 6 Brands";
display: inline-block;
font-size: 20px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.gh-head-menu .nav-youtube a::before {content: "\f167"}
.gh-head-menu .nav-twitter a::before {content: "\f099"}
.gh-head-menu .nav-tiktok a::before {content: "\e07b"}
.gh-head-menu .nav-instagram a::before {content: "\f16d"}
}
What would you like to be possible please?
I suspect you feel you have asked your question, but some visiting might not be as certain as you probably feel.
Thank you 
My apologies. I am trying to use the available code from here to make it so I have social media logos in the Liebling theme. I have followed the steps precisely, trialled other themes which has worked, meaning the code is correct, but cannot get it to function on Liebling
1 Like
Your css selectors are wrong for this theme.
Modification below. Note that you also need to be loading Font Awesome Brands somewhere, or else it wonât work. (You might already do this.) The code injection to do so is in the tutorial you just linked (
<!-- required, NOT in the style tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.m-nav__left .nav-youtube a,
.m-nav__left .nav-twitter a,
.m-nav__left .nav-tiktok a,
.m-nav__left .nav-instagram a {
font-size: 0 !important;
}
.m-nav__left .nav-youtube a::before,
.m-nav__left .nav-twitter a::before,
.m-nav__left .nav-tiktok a::before,
.m-nav__left .nav-instagram a::before {
font-family: "Font Awesome 6 Brands";
display: inline-block;
font-size: 20px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.m-nav__left .nav-youtube a::before {content: "\f167"}
.m-nav__left .nav-twitter a::before {content: "\f099"}
.m-nav__left .nav-tiktok a::before {content: "\e07b"}
.m-nav__left .nav-instagram a::before {content: "\f16d"}
}
</style>
For anyone who comes later, when you want code for one theme to work on another theme, youâre probably going to have to adjust the CSS selectors. Iâve got a small tutorial on figuring out what your selectors are available here: Code Injection 101
2 Likes
Your link is awesome, thanks! Still no social media images but i am so very grateful for your post
Can you link your site? Youâre probably just missing something little. 
Cathy thatâs very kind of you, it is not ready, though.
I just tried the code posted above and it worked for me. You know that youâve got to set up the navigation with the links exactly named like the nav-whatever, right? So the Youtube link has to be named âyoutubeâ (capitaliation doesnât matter) when you set it up in Settings > navigation.
You did set each link up in settings > navigation, right? This code just changes how the links look, but you have to have already made the links.
OKay donât judge, under construction! Canât for the life of me figure it Daniel H Phillips
Did you use the code I posted above? Because I see the original code injection, without the selectors I fixed for you. Maybe you pasted it in but forgot to save it. Try again, using the code I posted, ok?
1 Like
Wow! You absolute LEGEND!
1 Like
laughs Sometimes I give good directions. :) Glad thatâs got you fixed up! Maybe mark the post with the code as âsolvedâ if so.
1 Like
Canât figure for the life of me how to âmark as solvedâ (hides)
