{"id":3059,"date":"2021-06-23T08:33:50","date_gmt":"2021-06-23T08:33:50","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3059"},"modified":"2023-02-21T10:43:46","modified_gmt":"2023-02-21T10:43:46","slug":"how-to-add-icons-in-wordpress-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/","title":{"rendered":"How to Add Icons in WordPress With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3059\" class=\"elementor elementor-3059\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6ca16a17 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6ca16a17\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15a1de1\" data-id=\"15a1de1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-45476aff elementor-widget elementor-widget-video\" data-id=\"45476aff\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=osdgAw9gcVI&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3aae0ebf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3aae0ebf\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1452ac0b\" data-id=\"1452ac0b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-516e6328 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"516e6328\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1361\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1361\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1362\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1362\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1361\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1361\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1361\" tabindex=\"0\" hidden=\"false\"><p>Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1362\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1362\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1362\" tabindex=\"0\" hidden=\"hidden\"><p>hey everyone this is Noah from Elementor<br \/>the icon widget is incredibly useful for<br \/>displaying icons and numerous tiles on<br \/>your page I&#8217;ll now show you how with<br \/>Elementor you can add them along with<br \/>cool features and effects so first I&#8217;ll<br \/>search for the widget and drag it in and<br \/>once it&#8217;s dragged into place you&#8217;ll see<br \/>the content area in the style area in<br \/>the concert area you have full control<br \/>over the widgets contents so for view<br \/>you could set it as default stacked or<br \/>framed so you can see with these two<br \/>other icons it&#8217;s stacked and framed with<br \/>a border icon here you could choose from<br \/>the list of icons from the font awesome<br \/>website say I choose refresh icon link<br \/>in this field you could insert a link<br \/>for your icon and set it to open in a<br \/>new tab by clicking here and I have the<br \/>alignment as left center or right moving<br \/>on to the style tab here you have full<br \/>control over the icon style and the icon<br \/>hover style<br \/>in the icon style you could choose the<br \/>primary color now note that if you set<br \/>the icon as stacked or framed a<br \/>secondary color option is added here I<br \/>will show you this soon with these two<br \/>icons next you have the icon size where<br \/>you could choose the size of the icon<br \/>and you have icon rotate where you could<br \/>rotate the icon completely<br \/>[Music]<br \/>we&#8217;ll move on to the icon over style<br \/>options here I have the primary color<br \/>where I could set the offer color for<br \/>the icon say black as you can see it&#8217;s<br \/>black when I move the mouse over it and<br \/>the animation I have here a big list of<br \/>animations see skew or wobble etc now<br \/>I&#8217;ll show you this second icon where as<br \/>you can see it is a stacked icon so it<br \/>also has a shape option to choose as<br \/>circled or squared and in the style as<br \/>you can see the secondary color is added<br \/>which is actually the color of the icon<br \/>itself another added feature is the icon<br \/>padding where you could set the inner<br \/>padding of the icon this is great for<br \/>example if you reduce the size of the<br \/>icon then add its padding and you have<br \/>the border radius where you would set<br \/>the border as rounded or even rounder or<br \/>squared etc now same goes for the third<br \/>icon over here which is set as framed<br \/>and as circle shapes now in the icon<br \/>hover settings for both of these icons<br \/>you also have the secondary color now<br \/>watch this I could set a really cool<br \/>hover effect by setting the over colors<br \/>as a negative so say I give the primary<br \/>white and the secondary color is blue<br \/>and now I give it an animation of pop<br \/>see how cool that looks<br \/>now that you know how to use this great<br \/>icon widget you can add creative and<br \/>dynamic icons to your page I hope you<br \/>enjoyed this video for more videos and<br \/>tutorials subscribe our youtube channel<br \/>or visit us at docs.bmc.com<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features Transcript hey everyone this [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4206,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Icons in WordPress With Elementor - Academy<\/title>\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\/academy\/how-to-add-icons-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Icons in WordPress With Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features Transcript hey everyone this [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:33:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:43:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Icons in WordPress With Elementor - Academy","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\/academy\/how-to-add-icons-in-wordpress-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Icons in WordPress With Elementor - Academy","og_description":"Overview Transcript Overview Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features Transcript hey everyone this [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:33:50+00:00","article_modified_time":"2023-02-21T10:43:46+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add Icons in WordPress With Elementor","datePublished":"2021-06-23T08:33:50+00:00","dateModified":"2023-02-21T10:43:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/"},"wordCount":608,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/","name":"How to Add Icons in WordPress With Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg","datePublished":"2021-06-23T08:33:50+00:00","dateModified":"2023-02-21T10:43:46+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Widget-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-icons-in-wordpress-with-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add Icons in WordPress With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3059"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3059\/revisions"}],"predecessor-version":[{"id":9386,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3059\/revisions\/9386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4206"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}