Docs

[ddlawcpa]

I created a copy of _nav-primary.php in a child theme.

I added the custom social and button code as instructed here. https://community.theme.co/forums/topic/add-social-icons-and-button-to-navbar/

However, the icons still don’t show.

Even if i try to move the <i> icon outside the custom div, they don’t show.

website

[Thai]

Hi There,

Please replace your code with this:

<div class="social-button">
	<a href="facbook-url-goes-here" class="custom-social"><i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="twitter-url-goes-here" class="custom-social"><i class="x-icon x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="youtube-url-goes-here" class="custom-social"><i class="x-icon x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="instagram-url-goes-here" class="custom-social"><i class="x-icon x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>
	<a href="button-url-goes-here" class="custom-button">In Progress</a>
</div>

Hope it helps 🙂

[ddlawcpa]

Thank You it did!

I would prefer however, if the icons had the formatting matched the formatting of the built-in global icons. Is there somewhere where I can get the css for that? This is the CSS i currently have for these icons:

/* Custom Social and Button Styling */
.social-button {
float: right;
margin-top: 23px;
margin-left: 20px;

}

.social-button a {
display: inline-block;
vertical-align: middle;
}

.social-button .custom-button {
padding: 5px 10px;
background-color: #d1202f;
color: #fff;
border-bottom: 3px solid #940E19;
font-size: 16px;
font-size: 1.6rem;
}

.social-button .custom-button:hover {
background-color: #B31A27;
}

[Rue Nel]

Hello There,

The easiest way to have the icons in your header like it is positioned right now and that they will have the same styling with the global social icons, I would suggest that you replace this block:

<!-- Custom Social and Button Code - Started -->
<div class="social-button">
  <a href="facbook-url-goes-here" class="custom-social"><i class="x-icon-facebook-square"></i></a>
  <a href="twitter-url-goes-here" class="custom-social"><i class="x-icon-twitter-square"></i></a>
  <a href="youtube-url-goes-here" class="custom-social"><i class="x-icon-youtube-square"></i></a>
  <a href="instagram-url-goes-here" class="custom-social"><i class="x-icon-instagram"></i></a>
  <a href="button-url-goes-here" class="custom-button">Book a Game</a>
</div>
<!-- Custom Social and Button Code - Ended -->

by just using this code:

<!-- Custom Social and Button Code - Started -->
<?php x_social_global(); ?>
<!-- Custom Social and Button Code - Ended -->

Having this method could make use of the global social icons and its styling instead. No additional styling will be needed. Again, this method is only useful if you do not have any custom icons to be added in the area.

Hope this helps.

[Author]

Posts