{"id":34467,"date":"2013-07-08T19:09:55","date_gmt":"2013-07-08T13:39:55","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=34467"},"modified":"2026-10-13T13:42:10","modified_gmt":"2026-10-13T08:12:10","slug":"font-awesome-icons-in-bootstrap","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/","title":{"rendered":"How to Add Font Awesome Icons in Bootstrap 5 (2026)"},"content":{"rendered":"<p>Want to add Font Awesome icons in Bootstrap themes? When we switched our Bootstrap site from Glyphicons to Font Awesome in 2013, it meant sharp, scalable icons with no image sprites. Bootstrap 5 dropped Glyphicons altogether, so Font Awesome (now version 7) is still one of the easiest ways to add icons to a Bootstrap site. Here&#8217;s the current code, with examples you can copy.<\/p>\n<p><img decoding=\"async\" class=\"alignright size-full wp-image-34491\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome.png\" alt=\"Font Awesome icons in Bootstrap\" width=\"213\" height=\"260\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To use Font Awesome icons in Bootstrap 5, add the Font Awesome CSS after Bootstrap&#8217;s CSS in your page <code>&lt;head&gt;<\/code>:<br \/>\n<code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@7.3.1\/css\/all.min.css\"&gt;<\/code><br \/>\nThen insert icons with an <code>&lt;i&gt;<\/code> tag, for example <code>&lt;i class=\"fa-solid fa-flag\"&gt;&lt;\/i&gt;<\/code>. No extra JavaScript is needed.<\/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-6adc77c8d8695\" 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-6adc77c8d8695\" 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\/2013\/07\/font-awesome-icons-in-bootstrap\/#Why_use_Font_Awesome_icons_in_Bootstrap\" >Why use Font Awesome icons in Bootstrap?<\/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\/2013\/07\/font-awesome-icons-in-bootstrap\/#How_to_add_Font_Awesome_to_Bootstrap_5\" >How to add Font Awesome to Bootstrap 5<\/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\/2013\/07\/font-awesome-icons-in-bootstrap\/#Font_Awesome_icon_examples_for_Bootstrap\" >Font Awesome icon examples for Bootstrap<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Icon_styles\" >Icon styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Sizes\" >Sizes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Icons_in_Bootstrap_buttons_and_alerts\" >Icons in Bootstrap buttons and alerts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Spinning_and_stacked_icons\" >Spinning and 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-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Accessibility_tips\" >Accessibility tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Load_Font_Awesome_faster\" >Load Font Awesome faster<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Font_Awesome_vs_Bootstrap_Icons\" >Font Awesome vs Bootstrap Icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#More_Bootstrap_and_Font_Awesome_guides\" >More Bootstrap and Font Awesome guides<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-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-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Does_Bootstrap_5_include_Font_Awesome\" >Does Bootstrap 5 include Font Awesome?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Why_are_my_Font_Awesome_icons_showing_as_squares\" >Why are my Font Awesome icons showing as squares?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Is_Font_Awesome_free\" >Is Font Awesome free?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/#Do_I_need_Font_Awesomes_JavaScript\" >Do I need Font Awesome&#8217;s JavaScript?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_use_Font_Awesome_icons_in_Bootstrap\"><\/span>Why use Font Awesome icons in Bootstrap?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Scalable vector icons:<\/strong> icons are a font (or SVG), so they stay sharp at any size and on high-resolution screens.<\/li>\n<li><strong>Style with CSS:<\/strong> change colour, size and shadows with normal CSS or Bootstrap utility classes like <code>text-primary<\/code> and <code>fs-3<\/code>.<\/li>\n<li><strong>Thousands of free icons:<\/strong> the free set includes solid, regular and brand icons, including logos for X, WhatsApp, GitHub and more.<\/li>\n<li><strong>No sprites to manage:<\/strong> one CSS file gives you every icon.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_to_add_Font_Awesome_to_Bootstrap_5\"><\/span>How to add Font Awesome to Bootstrap 5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here is a complete starter page with <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a> 5.3 and <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a> 7 loaded from the free jsDelivr CDN:<\/p>\n<pre><code>&lt;!doctype html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/css\/bootstrap.min.css\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@7.3.1\/css\/all.min.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;button class=\"btn btn-primary\"&gt;\r\n    &lt;i class=\"fa-solid fa-download\"&gt;&lt;\/i&gt; Download\r\n  &lt;\/button&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>Use <code>all.min.css<\/code> for the simplest setup. It loads the solid, regular and brands styles in one file. If you only need a few icons, see &#8220;Load Font Awesome faster&#8221; below.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Font_Awesome_icon_examples_for_Bootstrap\"><\/span>Font Awesome icon examples for Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Icon_styles\"><\/span>Icon styles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>&lt;i class=\"fa-solid fa-house\"&gt;&lt;\/i&gt;      &lt;!-- solid --&gt;\r\n&lt;i class=\"fa-regular fa-envelope\"&gt;&lt;\/i&gt;  &lt;!-- regular (outline) --&gt;\r\n&lt;i class=\"fa-brands fa-x-twitter\"&gt;&lt;\/i&gt;  &lt;!-- brand logo --&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Sizes\"><\/span>Sizes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add <code>fa-xs<\/code>, <code>fa-sm<\/code>, <code>fa-lg<\/code>, <code>fa-xl<\/code>, or <code>fa-2x<\/code> to <code>fa-10x<\/code>:<\/p>\n<pre><code>&lt;i class=\"fa-solid fa-flag fa-3x\"&gt;&lt;\/i&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Icons_in_Bootstrap_buttons_and_alerts\"><\/span>Icons in Bootstrap buttons and alerts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>&lt;a class=\"btn btn-success\" href=\"#\"&gt;&lt;i class=\"fa-solid fa-check me-2\"&gt;&lt;\/i&gt;Save&lt;\/a&gt;\r\n&lt;div class=\"alert alert-warning\"&gt;&lt;i class=\"fa-solid fa-triangle-exclamation me-2\"&gt;&lt;\/i&gt;Check your settings&lt;\/div&gt;<\/code><\/pre>\n<p>Bootstrap&#8217;s spacing utilities such as <code>me-2<\/code> add a gap between the icon and the text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Spinning_and_stacked_icons\"><\/span>Spinning and stacked icons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>&lt;i class=\"fa-solid fa-spinner fa-spin\"&gt;&lt;\/i&gt;\r\n&lt;span class=\"fa-stack\"&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-github fa-stack-1x fa-inverse\"&gt;&lt;\/i&gt;\r\n&lt;\/span&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Accessibility_tips\"><\/span>Accessibility tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Font Awesome adds <code>aria-hidden=\"true\"<\/code> handling automatically when you use its SVG\/JS version. With the CSS version, add it yourself to decorative icons, and give icon-only links a label:<\/p>\n<pre><code>&lt;a href=\"https:\/\/x.com\/qot\" aria-label=\"Follow us on X\"&gt;\r\n  &lt;i class=\"fa-brands fa-x-twitter\" aria-hidden=\"true\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Load_Font_Awesome_faster\"><\/span>Load Font Awesome faster<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>all.min.css<\/code> plus its font files adds weight to every page. To keep Bootstrap sites fast:<\/p>\n<ul>\n<li>Load only the styles you use, for example <code>fontawesome.min.css<\/code> plus <code>solid.min.css<\/code> and <code>brands.min.css<\/code>.<\/li>\n<li>Use Font Awesome&#8217;s free <strong>Kit<\/strong> to subset icons, or paste individual SVG icons inline.<\/li>\n<li>Add <code>font-display: swap<\/code> behaviour by preloading the font file you use most.<\/li>\n<\/ul>\n<p>We share more speed tricks in <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/\">how to load Bootstrap themes faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Font_Awesome_vs_Bootstrap_Icons\"><\/span>Font Awesome vs Bootstrap Icons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap now has its own free icon library, <a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap Icons<\/a>, with over 2,000 icons that match Bootstrap&#8217;s style. Use Bootstrap Icons if you want a smaller, consistent set; choose Font Awesome if you need more brand logos or icon styles. Both work the same way with an <code>&lt;i&gt;<\/code> tag and a CDN link.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"More_Bootstrap_and_Font_Awesome_guides\"><\/span>More Bootstrap and Font Awesome guides<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">Add Font Awesome icons to any site<\/a>, without Bootstrap<\/li>\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/\">Floating social share icons with Bootstrap 5 and Font Awesome<\/a><\/li>\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/\">Load Bootstrap and Font Awesome in the WordPress editor<\/a><\/li>\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/\">Pure CSS social media icons<\/a> and our original <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a> setup<\/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_include_Font_Awesome\"><\/span>Does Bootstrap 5 include Font Awesome?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Bootstrap 5 has no built-in icons. Add Font Awesome or Bootstrap Icons with a separate CSS link.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_are_my_Font_Awesome_icons_showing_as_squares\"><\/span>Why are my Font Awesome icons showing as squares?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The font files didn&#8217;t load, or you used class names from an older version. Use the full CDN path to <code>all.min.css<\/code> and current classes such as <code>fa-solid<\/code> instead of the old <code>fa<\/code> or <code>fas<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_Font_Awesome_free\"><\/span>Is Font Awesome free?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Font Awesome Free is free for commercial use, including the solid, regular (partial) and brand icons. Pro adds more styles and icons.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_I_need_Font_Awesomes_JavaScript\"><\/span>Do I need Font Awesome&#8217;s JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. The CSS version works on its own. The JavaScript\/SVG version is optional.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to add Font Awesome icons in Bootstrap themes? When we switched our Bootstrap site from Glyphicons to Font Awesome&#8230;<\/p>\n","protected":false},"author":4,"featured_media":34491,"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":[6],"tags":[49],"class_list":["post-34467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34467","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=34467"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34467\/revisions"}],"predecessor-version":[{"id":65487,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34467\/revisions\/65487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/34491"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=34467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=34467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=34467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}