How to Create Floating Social Share Icons with Bootstrap 5 and Font Awesome
Floating social share buttons stay beside your article as readers scroll, so the share option is always one click away. You don’t need a heavy social sharing plugin to add them. We built ours with just Bootstrap and Font Awesome icons, a few lines of HTML and no extra images or tracking scripts. Here’s how to create floating social share icons with Bootstrap 5 and Font Awesome 6, updated for 2026.
Quick answer: Wrap your share links in a <div class="position-fixed top-50 start-0 translate-middle-y d-none d-lg-flex flex-column">, so it floats at the left edge on large screens and hides on mobile. Inside, add links to each network’s share URL (for example https://x.com/intent/tweet?url=...) with Font Awesome icons such as <i class="fa-brands fa-x-twitter"></i>.
Table of Contents
What floating social share icons look like
The icons sit in a vertical bar at the side of the article and stay in place as the content scrolls:
Step 1: Load Bootstrap and Font Awesome
If your theme doesn’t already include them, add these to your site’s <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">You only need Bootstrap’s CSS here, not its JavaScript. See how to add Font Awesome icons for other ways to load the icons.
Step 2: Create the floating social share icons container
<div class="share-float position-fixed top-50 start-0 translate-middle-y
d-none d-lg-flex flex-column gap-2 ms-2">
... share icons ...
</div>How the Bootstrap 5 classes work:
position-fixed top-50 start-0 translate-middle-ypins the bar to the left edge, centred vertically.d-none d-lg-flexhides it on phones and tablets and shows it on large screens, where there’s room beside the content.flex-column gap-2stacks the icons vertically with a small gap.
In the original version of this tutorial we used Bootstrap 3’s affix plugin with pull-left hidden-sm hidden-xs. Bootstrap 4 and 5 removed affix, and CSS position: fixed or position: sticky now does the job without any JavaScript.
Prefer the bar to scroll with the article and stop at its end? Put it inside the article’s column and use position-sticky with top: 100px instead of position-fixed. The same technique works for menus; see how to make a CSS fixed navbar at the top or bottom of the page.
Step 3: Add the share icons
Each icon is a link to the network’s share URL. In a WordPress theme template (such as single.php), use the post’s URL and title:
<?php
$url = rawurlencode( get_permalink() );
$title = rawurlencode( get_the_title() );
?>
<a href="https://x.com/intent/tweet?text=<?php echo $title; ?>&url=<?php echo $url; ?>"
target="_blank" rel="noopener nofollow" title="Share on X" class="text-dark">
<i class="fa-brands fa-x-twitter fa-2x"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>"
target="_blank" rel="noopener nofollow" title="Share on Facebook" class="text-primary">
<i class="fa-brands fa-facebook fa-2x"></i></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $url; ?>"
target="_blank" rel="noopener nofollow" title="Share on LinkedIn" class="text-info">
<i class="fa-brands fa-linkedin fa-2x"></i></a>
<a href="https://wa.me/?text=<?php echo $title . '%20' . $url; ?>"
target="_blank" rel="noopener nofollow" title="Share on WhatsApp" class="text-success">
<i class="fa-brands fa-whatsapp fa-2x"></i></a>rawurlencode() makes titles with spaces and symbols safe in the URL. Font Awesome 6 uses the fa-brands style for brand logos, including the new fa-x-twitter icon for X.
Optional: round, stacked icons
For circular buttons, use Font Awesome’s stacking classes:
<span class="fa-stack fa-lg">
<i class="fa-solid fa-circle fa-stack-2x"></i>
<i class="fa-brands fa-x-twitter fa-stack-1x fa-inverse"></i>
</span>You can also build social media icons with pure CSS if you’d rather not load an icon font at all.
Step 4: Add a little CSS
.share-float { z-index: 1030; }
.share-float a { opacity: .8; transition: opacity .2s; }
.share-float a:hover { opacity: 1; }Why build your own floating social share icons?
- Speed: no extra images or third-party scripts. Only an icon font and a few lines of CSS.
- Privacy: plain share links don’t load tracking code from social networks until someone clicks.
- Control: choose exactly which networks to show. WhatsApp and LinkedIn often matter more today than older networks.
Frequently asked questions
Does Bootstrap 5 still have affix?
No. Affix was removed after Bootstrap 3. Use the position-fixed or position-sticky utility classes, or plain CSS.
Why hide floating social share icons on mobile?
They cover content on small screens. On mobile, place share buttons at the end of the post, or use the phone’s built-in share sheet with the Web Share API.
Is twitter.com/intent still working?
Yes, twitter.com links redirect to x.com, but using x.com/intent/tweet directly avoids the extra redirect.
Get our free weekly email: new tech guides and tools, no spam.
New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.
One email a week. Unsubscribe anytime. See our privacy policy.
Can I use the same code in other CMS websites where I didn’t use Bootstrap ?
Maybe i am a little late on the post. Things you have mentioned works but got to tell you i don’t see the icons floating on this post.
Such a great article to creat floating social share icons. It’s very helful in coding.
Is their a limit or we can put up as many social media icon as we want?
Thanks for sharing this code, I have seen floating social media icons on many websites but now I get the code. can i use this bootstrap in wordpress website?
Great article, Its very helpful for my website. I learned a lot from this article. Thanks for sharing this article with us
This article is very useful, actually these buttons can ward off visitors. Thanks for sharing.
Would this work on a weebly or squarespace site?
Nice ones, I tried a lot other but they all have the required features bundled for a price $.
I will use this code. thanks for sharing the code.
Versatile and yet very easy to implement share buttons are a need of the hour. As most of the themes nowadays already use Bootstrap, it is good idea to use Bootstrap to create share buttons. Thanks for the instructions.
If you are also amongst them and you frequently facing issue in this antivirus installed in your device then calling at the toll free McAfee Contact Number UK would be the best thing to do for you.0800-098-8371
how can I insert the code in wordpress. Can you help me?
I think floating share icons makes sites slow???
Have to see if this works on blogger blogs too or not. Thanks anyways!
Thanks, it was actually my theme, for some reason, but I managed to fix it. Thanks again for a great tutorial.
Good article on floating social share. Will try these on my website.
Thanks for sharing.
While using boothstrap we can easily float the social share
thanks for the post.
Any wordpress plugins that does all this? I tried a few but couldn’t arrange the location correctly.
Thanks in advance.
Hi, there
Thanks a lot that you’ve published at last a beautiful article like this for adding floating Social Icon. Floating Icon is always lovely, as well as floating Social Icon. I will try this.. and will come again.
Wow ! Can I use this social icons in MyBB and SMF forum ? if yes than How can I do this ??
Can i use this social icon in asp.net
Wow ! Can I use this social icons in MyBB and SMF forum ?
floating social share icon make your website more impressive
Floating social share icons provide a unique way of sharing your website content with diverse users. I constantly use floating share on my site. Thank you for sharing this info.
Wow ! Can I use this social icons in MyBB and SMF forum ? if yes than How can I do this ??
Thanks for sharing this useful articles on Social icon. please keep it up.
Thanks buddy for sharing this code. I use Social Sticky Bar and Sumo.me on my website. These two plugins are awesome. I will use this code and compare with my existing plugins.
I am happy after reading this useful post to show the floating social buttons after the article post. I got my expected information here and also learnt a new things from this post .
Thanks for you support !
I’ll give this code a go, thanks. I was using a plugin but it made my site slow right down so I had to remove it.
Bootstrap is getting very popular and many professional websites are built on it. Though I am very new to it but this was indeed very good post and easy to add floating sharebar option.
Hi, very useful post. You have shared a very useful topic and it is easy to understand and by this, all can do floating social share icons within simple steps. Thank u so much for sharing the coding. Keep doing!
thanks for sharing this article,the code u shared was very simple are working fine
A floating share bar gives really impressive result on social media. It makes you site very much popular.
Thanks for sharing your useful tips. Please post continue like this. I am awaiting for next..
Bulk Email marketing & newsletter solutions. It acts as a email gateway through which you can execute the email marketing of services provided by your company or your company’s products. This deals not only with Bulk email marketing but it also provides engine for newsletter sending to large list of your opt-in subscribers at a click away with pre-defined templates. What it exactly does is channels a commercial message to people who have subscribed to receive your promotional email or regular newsletter mail.
This widget is really awesome to encourage readers in sharing of content. I personally tried this and it increased social share counts in every post of my blog. Highly Recommended!
I simply want to mention I’m new to blogging and definitely liked this blog site. Probably I’m likely to bookmark your website . You actually come with fantastic articles and reviews. Thank you for sharing with us your blog site.
Bootstrap is the best for making web site responsive. There is very good functionality to make your web site responsive. Now a days you have to compulsory make your web site responsive other wise google not cached your web site.
Thanks, it was actually my theme, for some reason, but I managed to fix it. Thanks again for a great tutorial.
Thanks for the article. The main rule of placing social buttons is to make an article visible and easy to be liked or tweeted. But at the same time, social buttons should not irritate visitors.
Sir, According to my personal experience, floating social share icons are kinda irritating and annoying and specially when they tend to cover content. So my question is, If I use “Digg” which gives floating social share icons then will it increase my bounce rate?
Thanks for sharing this code, I have seen floating social media icons on many websites but now I get the code.
Thank you for your thoughtful response. Yes, improvements in Referral Program from Infolinks . However, large and small actions are both important, that’s a great think.
Thanks
Does floating share icons makes your site or blog slow?
Not at all. In fact floating icons load much faster.
tell me more about floating social share icons with bootstrap.