[Resolved] Font Awesome Circular Icon Background

[Paul]

Referencing an old question here but it seems the problem still exists. This HTML in a hook shows font awesome icons in a circle perfectly:

<span class="fa-stack">
	<i class="fa fa-circle fa-stack-2x icon-envelope"></i>
	<a href="#" target="_blank"><i class="fa fa-envelope fa-stack-1x" aria-hidden="true"></i></a>
</span>
<span class="fa-stack">
	<i class="fa fa-circle fa-stack-2x icon-facebook"></i>
	<a href="#" target="_blank"><i class="fa fa-facebook fa-stack-1x" aria-hidden="true"></i></a>
</span>
<span class="fa-stack">
	<i class="fa fa-circle fa-stack-2x icon-twitter"></i>
	<a href="#" target="_blank"><i class="fa fa-twitter fa-stack-1x" aria-hidden="true"></i></a>
</span>

Use the same HTML in a section the icons outside the circle. I did try Tom’s fix here – https://generatepress.com/forums/topic/font-awesome-stack/ but that didn’t correct the problem and caused the icons to overflow below the section itself.

See the Contact page on the URL.

Is there a fix for this or something it’s just best to avoid with the WP editor?

Thanks,
Paul.

[Tom]

Can you show me the code you used with my fix added?

[Paul]

<div class="section-contact">
	<div class="grid-container grid-parent">
		<div class="inside-grid-column grid-50 tablet-grid-50 mobile-grid-100">
			<div class="section-contact-summary">
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
				<p>Opening hours are described here.</p>
			</div>
		</div>
		<div class="inside-grid-column grid-50 tablet-grid-50 mobile-grid-100">
			<div class="section-contact-options">
				<span class="fa-stack fa-lg">
					<i class="fa fa-circle fa-stack-2x icon-phone"><!-- icon --></i>
					<i class="fa fa-phone fa-stack-1x"><!-- icon --></i>
				</span>
				<span class="fa-stack fa-lg">
					<i class="fa fa-circle fa-stack-2x icon-envelope"><!-- icon --></i>
					<i class="fa fa-envelope fa-stack-1x"><!-- icon --></i>
				</span>
				<span class="fa-stack fa-lg">
					<i class="fa fa-circle fa-stack-2x icon-map"><!-- icon --></i>
					<i class="fa fa-map fa-stack-1x"><!-- icon --></i>
				</span>
			</div>
		</div>
	</div>
</div>

[Jamal]

Hi Paul

Doing it like below works as explained here

<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x icon-phone"><!-- icon --></i><i class="fa fa-phone fa-stack-1x"><!-- icon --></i></span>

Hope this was helpful

[Paul]

Yeah that works 🙂

Thanks Jamal.

[Author]

Posts