Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Font Awesome Circular Icon Background

Home Forums Support Font Awesome Circular Icon Background

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #445552
    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.

    GeneratePress 2.0
    #445697
    Tom
    Lead Developer
    Lead Developer

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

    #445713
    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>
    #445818
    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

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #445865
    Paul

    Yeah that works 🙂

    Thanks Jamal.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.