{"id":34730,"date":"2013-07-29T22:06:38","date_gmt":"2013-07-29T16:36:38","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=34730"},"modified":"2026-10-13T13:42:18","modified_gmt":"2026-10-13T08:12:18","slug":"add-icon-font-awesome","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/","title":{"rendered":"How to Add Font Awesome Icons to Any Website (2026)"},"content":{"rendered":"<p>Want to <strong>add Font Awesome icons<\/strong> to your website? Font Awesome is the most popular icon library on the web: thousands of scalable icons for social media, menus, buttons and lists, styled with CSS just like text. We started using it in 2013 as a replacement for Bootstrap&#8217;s Glyphicons and soon used it on every project. The library has grown through several major versions since, and the way you load it has changed. Here is how to add Font Awesome icons to any site in 2026.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-59259\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code-1024x935.jpg\" alt=\"add Font Awesome icons with HTML code\" width=\"760\" height=\"694\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code-1024x935.jpg 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code-300x274.jpg 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code-150x137.jpg 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code-768x701.jpg 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/font-awesome-code.jpg 1306w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Create a free Kit at fontawesome.com and paste its one-line script into your page head, or link the Font Awesome Free CSS from a CDN such as cdnjs. Then add an icon with an <code>&lt;i&gt;<\/code> tag, for example <code>&lt;i class=\"fa-solid fa-house\"&gt;&lt;\/i&gt;<\/code>. In WordPress, use the official Font Awesome plugin.<\/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-6adc6d0c180dc\" 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-6adc6d0c180dc\" 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\/add-icon-font-awesome\/#Why_use_an_icon_font\" >Why use an icon font?<\/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\/add-icon-font-awesome\/#How_to_add_Font_Awesome_to_your_site\" >How to add Font Awesome to your site<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/#Option_1_Font_Awesome_Kit_recommended\" >Option 1: Font Awesome Kit (recommended)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/#Option_2_CDN_stylesheet\" >Option 2: CDN stylesheet<\/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\/add-icon-font-awesome\/#Option_3_Self-host_or_npm\" >Option 3: Self-host or npm<\/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\/2013\/07\/add-icon-font-awesome\/#How_to_use_Font_Awesome_icons\" >How to use Font Awesome icons<\/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\/2013\/07\/add-icon-font-awesome\/#Style_icons_with_CSS\" >Style icons with CSS<\/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\/2013\/07\/add-icon-font-awesome\/#Font_Awesome_in_WordPress_and_Bootstrap\" >Font Awesome in WordPress and Bootstrap<\/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\/add-icon-font-awesome\/#Keep_it_fast\" >Keep it fast<\/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\/add-icon-font-awesome\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/#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-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/#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-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/#Can_I_use_Font_Awesome_without_a_Kit\" >Can I use Font Awesome without a Kit?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_use_an_icon_font\"><\/span>Why use an icon font?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Icons from <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a> are vector graphics, so they stay crisp at any size and on high-resolution screens. You can change their colour, size and hover effects with CSS, and one library replaces dozens of separate image files or old CSS sprites.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_add_Font_Awesome_to_your_site\"><\/span>How to add Font Awesome to your site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Option_1_Font_Awesome_Kit_recommended\"><\/span>Option 1: Font Awesome Kit (recommended)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Sign up free at fontawesome.com and create a Kit.<\/li>\n<li>Copy the Kit&#8217;s script tag, which looks like <code>&lt;script src=\"https:\/\/kit.fontawesome.com\/yourcode.js\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;<\/code>.<\/li>\n<li>Paste it into the <code>&lt;head&gt;<\/code> of your pages. Kits update automatically and can load only the icons you use.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Option_2_CDN_stylesheet\"><\/span>Option 2: CDN stylesheet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Link the free CSS from <a href=\"https:\/\/cdnjs.com\/libraries\/font-awesome\" target=\"_blank\" rel=\"noopener\">cdnjs<\/a> or jsDelivr in your head section. Copy the current all.min.css link from the CDN page so you get the latest version. In 2013 we used BootstrapCDN, which has since moved to jsDelivr; see our tests of the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/09\/fastest-cdn-jquery-bootstrap\/\">fastest CDN for jQuery and Bootstrap<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Option_3_Self-host_or_npm\"><\/span>Option 3: Self-host or npm<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Download Font Awesome Free or install it with npm (<code>npm install @fortawesome\/fontawesome-free<\/code>) and serve the files from your own server.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_use_Font_Awesome_icons\"><\/span>How to use Font Awesome icons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code>&lt;i class=\"fa-solid fa-house\"&gt;&lt;\/i&gt;        &lt;!-- solid house --&gt;\r\n&lt;i class=\"fa-regular fa-envelope\"&gt;&lt;\/i&gt;    &lt;!-- outline envelope --&gt;\r\n&lt;i class=\"fa-brands fa-youtube\"&gt;&lt;\/i&gt;      &lt;!-- brand icon --&gt;\r\n&lt;i class=\"fa-solid fa-star fa-2x\"&gt;&lt;\/i&gt;     &lt;!-- double size --&gt;\r\n&lt;i class=\"fa-solid fa-spinner fa-spin\"&gt;&lt;\/i&gt; &lt;!-- spinning --&gt;<\/code><\/pre>\n<p>Search the icon gallery on the Font Awesome site, filter by &#8220;Free&#8221;, and copy the code. Older code like <code>fa fa-star<\/code> from version 4 still works in many setups through shims, but new projects should use the current class names.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Style_icons_with_CSS\"><\/span>Style icons with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Change colour: <code>.fa-youtube { color: #FF0000; }<\/code><\/li>\n<li>Change size with <code>font-size<\/code> or the fa-xs to fa-10x classes.<\/li>\n<li>Add accessible labels: decorative icons should have <code>aria-hidden=\"true\"<\/code>; icons used as buttons need visible or screen-reader text.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Font_Awesome_in_WordPress_and_Bootstrap\"><\/span>Font Awesome in WordPress and Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In WordPress, the official <a href=\"https:\/\/wordpress.org\/plugins\/font-awesome\/\" target=\"_blank\" rel=\"noopener\">Font Awesome plugin<\/a> loads icons and adds an icon block. Many themes already include it, so check before loading it twice. For Bootstrap projects, see how to use <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/\">Font Awesome icons in Bootstrap<\/a>, or try lightweight <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/\">pure CSS social media icons<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Keep_it_fast\"><\/span>Keep it fast<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The full library adds weight. Use a Kit with subsetting, or SVG icons for just a handful of icons, and avoid loading Font Awesome on pages that do not use it. Check speed with <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/06\/faster-sites-with-google-page-speed\/\">Google PageSpeed Insights<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\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>Yes. Font Awesome Free includes thousands of icons for personal and commercial use. Pro adds more icons and styles.<\/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 CSS or font files are not loading, or you are using class names from a different version. Check the browser console and match class names to your version.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_Font_Awesome_without_a_Kit\"><\/span>Can I use Font Awesome without a Kit?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Use a CDN link or self-host the free files.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to add Font Awesome icons to your website? Font Awesome is the most popular icon library on the web:&#8230;<\/p>\n","protected":false},"author":4,"featured_media":59259,"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-34730","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\/34730","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=34730"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34730\/revisions"}],"predecessor-version":[{"id":65491,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34730\/revisions\/65491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/59259"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=34730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=34730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=34730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}