{"id":26603,"date":"2022-10-20T12:00:00","date_gmt":"2022-10-20T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=26603"},"modified":"2024-03-07T11:11:26","modified_gmt":"2024-03-07T09:11:26","slug":"inline-font-awesome","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/inline-font-awesome\/","title":{"rendered":"Inline Font Icons"},"content":{"rendered":"\n

SVGs are vector-based images that are rendered using the browser’s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site\u2019s performance.<\/p>\n\n\n\n

Advantages \/ Differences<\/h2>\n\n\n\n
    \n
  1. How Icons Render<\/strong> – SVG renders in your page\u2019s HTML rather than as CSS pseudo-elements in Icon Fonts<\/li>\n\n\n\n
  2. Auto Accessibility<\/strong> – SVG supports this feature by default rather than only in a kit<\/li>\n\n\n\n
  3. Advanced Features<\/strong> – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do not<\/li>\n\n\n\n
  4. Scalability<\/strong> – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.<\/li>\n<\/ol>\n\n\n\n

    [callout type=”note”]This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology<\/em> and set them to SVG.[\/callout]<\/p>\n","protected":false},"excerpt":{"rendered":"

    In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome icons inline with SVG by activating the option in Elementor Experiments.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65bceb0187699b8407aea4db"],"footnotes":""},"categories":[1440],"tags":[],"class_list":["post-26603","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality"],"acf":[],"yoast_head":"\nInline Font Icons | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/inline-font-awesome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inline Font Icons | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/inline-font-awesome\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-20T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-07T09:11:26+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Inline Font Icons\",\"datePublished\":\"2022-10-20T09:00:00+00:00\",\"dateModified\":\"2024-03-07T09:11:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/\"},\"wordCount\":164,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/\",\"url\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/\",\"name\":\"Inline Font Icons | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2022-10-20T09:00:00+00:00\",\"dateModified\":\"2024-03-07T09:11:26+00:00\",\"description\":\"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/inline-font-awesome\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/inline-font-awesome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Inline Font Icons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inline Font Icons | Elementor","description":"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/inline-font-awesome\/","og_locale":"en_US","og_type":"article","og_title":"Inline Font Icons | Elementor","og_description":"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/inline-font-awesome\/","og_site_name":"Help","article_published_time":"2022-10-20T09:00:00+00:00","article_modified_time":"2024-03-07T09:11:26+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Inline Font Icons","datePublished":"2022-10-20T09:00:00+00:00","dateModified":"2024-03-07T09:11:26+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/"},"wordCount":164,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/","url":"https:\/\/elementor.com\/help\/inline-font-awesome\/","name":"Inline Font Icons | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2022-10-20T09:00:00+00:00","dateModified":"2024-03-07T09:11:26+00:00","description":"Learn everything about Inline Font Icons in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/inline-font-awesome\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/inline-font-awesome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Inline Font Icons"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/26603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=26603"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/26603\/revisions"}],"predecessor-version":[{"id":46914,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/26603\/revisions\/46914"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=26603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=26603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=26603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}