{"id":8501,"date":"2019-04-30T12:35:16","date_gmt":"2019-04-30T12:35:16","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=8501"},"modified":"2020-02-13T13:16:46","modified_gmt":"2020-02-13T13:16:46","slug":"how-to-use-font-awesome-icons-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-use-font-awesome-icons-in-amp\/","title":{"rendered":"How to use font awesome icons in AMP"},"content":{"rendered":"\n<p><strong>Follow these steps to use font awesome icons in AMP<\/strong><\/p>\n\n\n\n<p><strong>Step 1: <\/strong>Go to <strong>WordPress Admin Area<\/strong> -&gt; <strong>AMP option Panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Global<\/strong>.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> In this Font Icon Library option you need to select the &#8220;<strong>Font Awesome Icons<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"421\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-1024x421.png\" alt=\"\" class=\"wp-image-16385\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-1024x421.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-300x123.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-768x316.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4-100x41.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-4.png 1309w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Font Icon Library: <\/strong>In this option, you need to select the \u201c<strong>Font Awesome Icons<\/strong>\u201d. and the Font Awesome Icons will be displayed in the AMP version. But if you want to add font awesome pro library then you need to add Stylesheet library in the head section.<\/p>\n\n\n\n<ul><li>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt;<strong> Settings<\/strong> -&gt; <strong>Advance Settings<\/strong> -&gt; In this &#8220;<strong>Enter HTML in Head<\/strong>&#8221; option you need to add stylesheet library and then click on the &#8220;<strong>Save changes<\/strong>&#8221; button like below the screenshot.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"508\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-1024x508.png\" alt=\"\" class=\"wp-image-14433\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-1024x508.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-300x149.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-768x381.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17-100x50.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/17.png 1321w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4>The output of Font Awesome Icons <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"495\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-1024x495.png\" alt=\"\" class=\"wp-image-8522\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-1024x495.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-768x371.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/font-op.png 1351w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Follow these steps to use font awesome icons in AMP Step 1: Go to WordPress Admin Area -&gt; AMP option Panel -&gt; Design -&gt; Global. Step 2: In this Font Icon Library option you need to select the &#8220;Font Awesome Icons&#8220;. Font Icon Library: In this option, you need to&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/8501"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=8501"}],"version-history":[{"count":20,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/8501\/revisions"}],"predecessor-version":[{"id":16387,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/8501\/revisions\/16387"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=8501"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=8501"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=8501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}