Archived topic
Font Awesome Circular Icon Background
4 replies · Started by Paul on December 9, 2017
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.
Can you show me the code you used with my fix added?
<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>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
Yeah that works :)
Thanks Jamal.
