Docs

[RITTERSP]

I need to make these icons inline and have them hyperlinked as well. What do I need to do to allow the icon elements to be inline?

http://performancenutritionsummit.com/speaker-template/

[Thai]

Hi There,

Please remove your icons, then using the raw content element with the following code:

<div class="x-custom-socials">
	<a href="#"><i class="x-icon aligncenter x-icon-desktop" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#"><i class="x-icon aligncenter x-icon-facebook" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#"><i class="x-icon aligncenter x-icon-twitter" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#"><i class="x-icon aligncenter x-icon-instagram" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#"><i class="x-icon aligncenter x-icon-pinterest" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#"><i class="x-icon aligncenter x-icon-youtube" style="text-align: center;  font-size: 20px;" data-x-icon="" aria-hidden="true"></i></a>
</div>

After that add the following CSS under Customizer > Custom > Global CSS:

.x-custom-socials {
    text-align: center;
}
.x-custom-socials a {
    display: inline-block;
    margin-right: 10px;
}

http://i.imgur.com/YTtXvMO.png

Hope it helps 🙂

[RITTERSP]

thx!

[Rupok]

You are welcome!

[Author]

Posts