{"id":43750,"date":"2015-11-12T21:24:57","date_gmt":"2015-11-12T15:54:57","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=43750"},"modified":"2026-10-13T15:24:52","modified_gmt":"2026-10-13T09:54:52","slug":"floating-social-share-icons-with-bootstrap","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/","title":{"rendered":"How to Create Floating Social Share Icons with Bootstrap 5 and Font Awesome"},"content":{"rendered":"<p>Floating social share buttons stay beside your article as readers scroll, so the share option is always one click away. You don&#8217;t need a heavy social sharing plugin to add them. We built ours with just <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a> and <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/\">Font Awesome icons<\/a>, a few lines of HTML and no extra images or tracking scripts. Here&#8217;s how to create floating social share icons with Bootstrap 5 and Font Awesome 6, updated for 2026.<\/p>\n<p><strong>Quick answer:<\/strong> Wrap your share links in a <code>&lt;div class=\"position-fixed top-50 start-0 translate-middle-y d-none d-lg-flex flex-column\"&gt;<\/code>, so it floats at the left edge on large screens and hides on mobile. Inside, add links to each network&#8217;s share URL (for example <code>https:\/\/x.com\/intent\/tweet?url=...<\/code>) with Font Awesome icons such as <code>&lt;i class=\"fa-brands fa-x-twitter\"&gt;&lt;\/i&gt;<\/code>.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af00ac457685\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af00ac457685\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#What_floating_social_share_icons_look_like\" >What floating social share icons look like<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Step_1_Load_Bootstrap_and_Font_Awesome\" >Step 1: Load Bootstrap and Font Awesome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Step_2_Create_the_floating_social_share_icons_container\" >Step 2: Create the floating social share icons container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Step_3_Add_the_share_icons\" >Step 3: Add the share icons<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Optional_round_stacked_icons\" >Optional: round, stacked icons<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Step_4_Add_a_little_CSS\" >Step 4: Add a little CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Why_build_your_own_floating_social_share_icons\" >Why build your own floating social share icons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Does_Bootstrap_5_still_have_affix\" >Does Bootstrap 5 still have affix?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Why_hide_floating_social_share_icons_on_mobile\" >Why hide floating social share icons on mobile?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/#Is_twittercomintent_still_working\" >Is twitter.com\/intent still working?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_floating_social_share_icons_look_like\"><\/span>What floating social share icons look like<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The icons sit in a vertical bar at the side of the article and stay in place as the content scrolls:<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-43784 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/floating-social-share.png\" alt=\"Floating social share icons with Bootstrap\" width=\"423\" height=\"229\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/floating-social-share.png 423w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/floating-social-share-150x81.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/floating-social-share-300x162.png 300w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Load_Bootstrap_and_Font_Awesome\"><\/span>Step 1: Load Bootstrap and Font Awesome<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If your theme doesn&#8217;t already include them, add these to your site&#8217;s <code>&lt;head&gt;<\/code>:<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\"&gt;<\/code><\/pre>\n<p>You only need Bootstrap&#8217;s CSS here, not its JavaScript. See <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">how to add Font Awesome icons<\/a> for other ways to load the icons.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Create_the_floating_social_share_icons_container\"><\/span>Step 2: Create the floating social share icons container<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code>&lt;div class=\"share-float position-fixed top-50 start-0 translate-middle-y\r\n            d-none d-lg-flex flex-column gap-2 ms-2\"&gt;\r\n  ... share icons ...\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>How the Bootstrap 5 classes work:<\/p>\n<ul>\n<li><code>position-fixed top-50 start-0 translate-middle-y<\/code> pins the bar to the left edge, centred vertically.<\/li>\n<li><code>d-none d-lg-flex<\/code> hides it on phones and tablets and shows it on large screens, where there&#8217;s room beside the content.<\/li>\n<li><code>flex-column gap-2<\/code> stacks the icons vertically with a small gap.<\/li>\n<\/ul>\n<p>In the original version of this tutorial we used Bootstrap 3&#8217;s <code>affix<\/code> plugin with <code>pull-left hidden-sm hidden-xs<\/code>. Bootstrap 4 and 5 removed affix, and CSS <code>position: fixed<\/code> or <code>position: sticky<\/code> now does the job without any JavaScript.<\/p>\n<p>Prefer the bar to scroll with the article and stop at its end? Put it inside the article&#8217;s column and use <code>position-sticky<\/code> with <code>top: 100px<\/code> instead of position-fixed. The same technique works for menus; see how to make a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2026\/10\/fix-navbar-top-bottom\/\">CSS fixed navbar<\/a> at the top or bottom of the page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Add_the_share_icons\"><\/span>Step 3: Add the share icons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Each icon is a link to the network&#8217;s share URL. In a WordPress theme template (such as <code>single.php<\/code>), use the post&#8217;s URL and title:<\/p>\n<pre><code>&lt;?php\r\n$url   = rawurlencode( get_permalink() );\r\n$title = rawurlencode( get_the_title() );\r\n?&gt;\r\n&lt;a href=\"https:\/\/x.com\/intent\/tweet?text=&lt;?php echo $title; ?&gt;&amp;url=&lt;?php echo $url; ?&gt;\"\r\n   target=\"_blank\" rel=\"noopener nofollow\" title=\"Share on X\" class=\"text-dark\"&gt;\r\n  &lt;i class=\"fa-brands fa-x-twitter fa-2x\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=&lt;?php echo $url; ?&gt;\"\r\n   target=\"_blank\" rel=\"noopener nofollow\" title=\"Share on Facebook\" class=\"text-primary\"&gt;\r\n  &lt;i class=\"fa-brands fa-facebook fa-2x\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=&lt;?php echo $url; ?&gt;\"\r\n   target=\"_blank\" rel=\"noopener nofollow\" title=\"Share on LinkedIn\" class=\"text-info\"&gt;\r\n  &lt;i class=\"fa-brands fa-linkedin fa-2x\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;a href=\"https:\/\/wa.me\/?text=&lt;?php echo $title . '%20' . $url; ?&gt;\"\r\n   target=\"_blank\" rel=\"noopener nofollow\" title=\"Share on WhatsApp\" class=\"text-success\"&gt;\r\n  &lt;i class=\"fa-brands fa-whatsapp fa-2x\"&gt;&lt;\/i&gt;&lt;\/a&gt;<\/code><\/pre>\n<p><code>rawurlencode()<\/code> makes titles with spaces and symbols safe in the URL. Font Awesome 6 uses the <code>fa-brands<\/code> style for brand logos, including the new <code>fa-x-twitter<\/code> icon for X.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Optional_round_stacked_icons\"><\/span>Optional: round, stacked icons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For circular buttons, use Font Awesome&#8217;s stacking classes:<\/p>\n<pre><code>&lt;span class=\"fa-stack fa-lg\"&gt;\r\n  &lt;i class=\"fa-solid fa-circle fa-stack-2x\"&gt;&lt;\/i&gt;\r\n  &lt;i class=\"fa-brands fa-x-twitter fa-stack-1x fa-inverse\"&gt;&lt;\/i&gt;\r\n&lt;\/span&gt;<\/code><\/pre>\n<p>You can also build <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/\">social media icons with pure CSS<\/a> if you&#8217;d rather not load an icon font at all.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Add_a_little_CSS\"><\/span>Step 4: Add a little CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code>.share-float { z-index: 1030; }\r\n.share-float a { opacity: .8; transition: opacity .2s; }\r\n.share-float a:hover { opacity: 1; }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Why_build_your_own_floating_social_share_icons\"><\/span>Why build your own floating social share icons?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Speed:<\/strong> no extra images or third-party scripts. Only an icon font and a few lines of CSS.<\/li>\n<li><strong>Privacy:<\/strong> plain share links don&#8217;t load tracking code from social networks until someone clicks.<\/li>\n<li><strong>Control:<\/strong> choose exactly which networks to show. WhatsApp and LinkedIn often matter more today than older networks.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_Bootstrap_5_still_have_affix\"><\/span>Does Bootstrap 5 still have affix?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Affix was removed after Bootstrap 3. Use the <code>position-fixed<\/code> or <code>position-sticky<\/code> utility classes, or plain CSS.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_hide_floating_social_share_icons_on_mobile\"><\/span>Why hide floating social share icons on mobile?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>They cover content on small screens. On mobile, place share buttons at the end of the post, or use the phone&#8217;s built-in share sheet with the Web Share API.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_twittercomintent_still_working\"><\/span>Is twitter.com\/intent still working?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, twitter.com links redirect to x.com, but using <code>x.com\/intent\/tweet<\/code> directly avoids the extra redirect.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Floating social share buttons stay beside your article as readers scroll, so the share option is always one click away&#8230;.<\/p>\n","protected":false},"author":4,"featured_media":43784,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[111,6],"tags":[49],"class_list":["post-43750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apps","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=43750"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43750\/revisions"}],"predecessor-version":[{"id":65588,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43750\/revisions\/65588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/43784"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=43750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=43750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=43750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}