Suppose you want to add an email & phone icon like this:
#1. Use this code to Code Injection – Footer
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <ul class="t-social"> <li> <a href="mailto:[email protected]"> <i class="fa-regular fa-envelope"></i> </a> </li> <li> <a href="tel:+441224356040"> <i class="fa-solid fa-phone"></i> </a> </li> </ul>
It will appear at the bottom of the site, like this
#2. Use this code to Code Injection – Footer, under #1 code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('ul.t-social').appendTo('.header-menu-nav-wrapper'); }) </script>
You will have
#3. Use this code to Custom CSS box
ul.t-social { margin-left: 5vw; padding-left: 2vw; display: none; align-items: center; } header#header ul.t-social { display: flex; } ul.t-social li { margin-right: 5.5vw; margin-top: 2.5vw; }
You will have