Canvas Support

social icons automatically left justified

5 replies·opened Mar 14, 2023
B
bagginsMar 14, 2023

This social icon is automatically justifying to the left of the row. I want it placed between the words. 

<div class="section footer-stick" style="background-color: #82bced">
    <div class="container">
        <div class="heading-block dark text-center border-0">
            <h3 class="ls-1">
                Follow Us
                <a href="https://www.instagram.com/blahbalh/" class="social-icon bg-light border-transparent h-bg-instagram" title="Instagram" target="_blank">
                    <i class="bi-instagram"></i>
                    <i class="bi-instagram"></i>
                </a>Instagram
            </h3>
S
SemiColonWebSTAFFMar 15, 2023

Hello,

Simply add the .d-inline-block Class to the .social-icon Element.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

B
bagginsMar 15, 2023

I want the social icon in between the words "US" and "Instagram".

This does not work. Still left justify icon:

<div class="heading-block dark text-center border-0">
            <h3 class="ls-1">
                Follow Us
                <a href="https://www.instagram.com/blah/" class="social-icon d-inline-block bg-light border-transparent h-bg-instagram d-inline-block" title="Instagram" target="_blank">
                    <i class="bi-instagram"></i>
                    <i class="bi-instagram"></i>
                </a>
                    Instagram
            </h3>            
        </div>

And this doesn't work:

<a href="https://www.instagram.com/blah/" class="social-icon bg-light border-transparent h-bg-instagram d-inline-block" title="Instagram" target="_blank">
                    <i class="bi-instagram d-inline-block"></i>
                    <i class="bi-instagram d-inline-block"></i>
                </a>

This kinda works but social icon is only to the left of the text instead of between text "US" and "Instagram":

<h3 class="ls-1 d-inline-block">
                Follow Us
                <a href="https://www.instagram.com/blah/" class="social-icon bg-light border-transparent h-bg-instagram d-inline-block" title="Instagram" target="_blank">
                    <i class="bi-instagram"></i>
                    <i class="bi-instagram"></i>
                </a>
                    Instagram
            </h3>
S
SemiColonWebSTAFFMar 16, 2023

Hello,

Consider using this code:

<h3 class="ls-1 d-flex align-items-center">
	Follow Us
	<a href="https://www.instagram.com/blah/" class="social-icon bg-light border-transparent h-bg-instagram mx-2 mb-0" title="Instagram" target="_blank" rel="noopener">
		<i class="bi-instagram"></i>
		<i class="bi-instagram"></i>
	</a>
	Instagram
</h3>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

B
bagginsMar 16, 2023

Getting closer. Yes, social icon now displays between text. However, problem now is that the entire row is left justify. Row should be centered.

<div class="heading-block dark text-center border-0">
            <h3 class="ls-1 d-flex align-items-center">
                Follow Us 
                <a href="https://www.instagram.com/blah/" class="social-icon bg-light border-transparent h-bg-instagram mx-2 mb-0" title="Follow Us" target="_blank" rel="noopener">
                    <i class="bi-instagram"></i>
                    <i class="bi-instagram"></i>
                </a>
                Instagram
            </h3>                           
        </div>
S
SemiColonWebSTAFFMar 16, 2023

Hello,

You can either use:

<h3 class="ls-1 d-flex align-items-center justify-content-center">

or:

<h3 class="ls-1 d-flex-inline align-items-center">

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard