{"id":28795,"date":"2021-08-24T15:00:52","date_gmt":"2021-08-24T13:00:52","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28795"},"modified":"2023-04-26T15:19:59","modified_gmt":"2023-04-26T13:19:59","slug":"how-to-add-icon-with-text-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-icon-with-text-in-wordpress\/","title":{"rendered":"How to Add an Icon With Text in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Icons and text, each in its own right, have strengths and flaws that make them a perfect pair when creating a website. An icon alone might be too ambiguous, without any context or fixed meanings. Text might look bland, and it certainly won\u2019t attract that much attention. Put the two together, and you\u2019ll get the best of both worlds. Often, you\u2019ll see the pairing when listing features, services, or any other elements that need to be shown as distinct, yet a part of the group.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This pairing is so prevalent that a lot of <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/icon-with-text-wordpress-themes\/\">premium themes<\/a> come with a shortcode to quickly insert an icon with text as a design element. If your theme doesn\u2019t, don\u2019t worry. Thanks to <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a>, the web\u2019s biggest collection of free Elementor addons, you\u2019ll be able to add all the icons with text you need in no time. All you\u2019ll need is Elementor and the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/icon-with-text\/\">Icon with Text widget<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Need some inspiration to help you get started? No worries. Here\u2019s a video showing how you can easily create a group of icons with text just like the one we have on the widget\u2019s page:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/CJGx8d_MPgI\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer to read about it, this article will take you through the steps we took to create a nice display of icons with text. Hopefully, you\u2019ll use what you read here to create some amazing designs on your own website!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll cover:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-icons-with-text-in-wordpress\">Adding Icons with Text in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content-of-the-icon-with-text\">Editing the Content of the Icon with Text<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-icon-with-text\">Styling the Icon with Text<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#final-touches\">Final Touches<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-icons-with-text-in-wordpress\"><\/a>Adding Icons with Text in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first step to adding icons with text in WordPress using the Qi Addons for Elementor plugin is to download and install <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a>. As one of the world\u2019s foremost page builders, you might already have it, but if you don\u2019t, simply download and activate it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next step would be to download and activate Qi Addons for Elementor. You can do so by going to <em><strong>Plugins &gt; Add New<\/strong><\/em>, searching for it, and installing and activating it once you see it in the results.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"583\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Add-Qi-Addons-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Add Qi Addons Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Add-Qi-Addons-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Add-Qi-Addons-Plugin-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Add-Qi-Addons-Plugin-768x462.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Add-Qi-Addons-Plugin-620x373.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that done, the best way to get familiar with the widget would be to navigate to a page where you might consider adding an icon with text and \u2013 getting to it. <strong>For our part, we created a three-columned section because we\u2019ve ended up creating three icons with text.<\/strong> Simply searching for the widget and dragging it to the leftmost column did the trick \u2013 <strong>we had our first icon with text ready for editing.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"445\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Added.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Added-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Added-768x353.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Added-620x285.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content-of-the-icon-with-text\"><\/a>Editing the Content of the Icon with Text<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Content section of the plugin option has a lot of tabs in it, but don\u2019t worry \u2013 it only means you\u2019ll be able to customize your design to fine detail. The first tab, General, is where you might go to choose the layout of the icon and text, whether you want to add <a href=\"https:\/\/qodeinteractive.com\/magazine\/free-icons-for-website\/\">a link to the icon<\/a>, and some associated options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is also where you\u2019ll choose the icon type you want to use, whether to use a separator or not, as well as some column responsiveness rules. <strong>The first change we\u2019ve made was to switch to the Top layout. We changed the icon to the Cog icon that was included in the icon library, and we were ready to move on.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Layout-and-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Layout and Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Layout-and-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Layout-and-Icon-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Layout-and-Icon-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Layout-and-Icon-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Content tab is where you can change the tile of the text in the column \u2013 or remove it altogether \u2013 as well as change the text itself and apply some limited styling options. You\u2019ll also get the chance to choose the text alignment.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The title we\u2019ve given to this icon and text combination was \u201cLimitless options.\u201d We\u2019ve switched the text to \u201cHundreds of fonts to choose from and options to use custom icons or SVGs.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"502\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-and-Text.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Title and Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-and-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-and-Text-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-and-Text-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-and-Text-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Button and Button Icon tabs are where you\u2019ll be able to choose how you want your button to look, how large it should be, whether it should have an icon and where, as which link should it point to.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The most interesting option in these two tabs is the Button Text option in the Button tab. By erasing the text, you can completely remove the button. <strong>That\u2019s how we did it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Delete-Button-Text.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Delete Button Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Delete-Button-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Delete-Button-Text-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Delete-Button-Text-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Delete-Button-Text-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remaining tabs in the Content options deal with the separator and the appear animation. You\u2019ll be able to choose the layout of the separator, its position, border-image as well as icon. You\u2019ll also have the option to switch between different animation styles and set their delays.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Since we didn\u2019t use a separator in creating our icon with text, and we didn\u2019t want to include animation, we\u2019ve nothing left to show you in the Content section and can move on to see the Style options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-icon-with-text\"><\/a>Styling the Icon with Text<\/h2>\n<p>[\/vc_column_text][vc_column_text]When styling your icon with text, the Style tab will be the first one up. The options you\u2019ll find there will let you choose the title tag, the regular color of the title, and the color on hover, as well as title typography options such as font, size, and weight. For the text, you\u2019ll be able to choose the color and the typography option.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ve made some minimal changes to the defaults here. We\u2019ve changed the title tag to H5, the title color to black using the hex code #000000, and we\u2019ve set the size of the title to 21 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-Style.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Title Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-Style-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-Style-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Title-Style-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Spacing Style tab, it\u2019s all about setting margins. You\u2019ll be able to choose the title margin top, the text margin top, the margin around the icon and, if you have a button, the button margin top.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We again opted for minimal change here by setting the title margin top to 22 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"488\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Spacing-Style-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Spacing-Style-768x387.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Spacing-Style-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Icon Style tab, the options you\u2019ll see will vary greatly on whether you want to put your icon in a box or not. If you do, you\u2019ll be able to choose a variety of options for the shape, size, and color of the box. If you don\u2019t, you\u2019ll be limited to the options that deal with the icon itself \u2013 its size, color, and animation on hover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ve opted against putting our icon in a box. We changed the size of our icon to 60 pixels, though, and its color to #ececec. On hover, we\u2019ve given it a slight vertical movement. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"487\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Icon-Style-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Icon-Style-768x386.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Icon-Style-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1531\" height=\"732\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text.gif\" class=\"attachment-full size-full\" alt=\"Icon With Text\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remaining tabs let you do great things with the looks and styling for the buttons, button icons, borders, underlines, separators, and separator icons. <strong>We\u2019ve opted against using any of those elements in our design<\/strong>, but if you choose a different path, know that here you\u2019ll find all the size, color, margin, and hover options you\u2019ll need to make your icon-and-text\u2019s buttons and separators pop out.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"final-touches\"><\/a>Final Touches<\/h2>\n<p>[\/vc_column_text][vc_column_text]The final touch involves duplicating the design we\u2019ve created and making some changes to it. This ability to simply duplicate a design with all of its options comes in great after you\u2019ve spent hours perfecting the settings on one element, and then you need to repeat it on a couple of others but with just slight alterations.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>To duplicate the design, we\u2019ve right-clicked on it, chosen the duplicate options, and done it once again. Elementor will stack these duplicates under the original \u2013 simply drag them to their columns. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Duplicated.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Duplicated\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Duplicated.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Duplicated-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Duplicated-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Duplicated-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remaining thing to do is change the icons, the titles, and the text. <strong>We\u2019ve changed the icon of the middle one to Map marker alt, its title to \u201cFully adjustable,\u201d and its text to \u201cResponsive and mobile-friendly, this widget will be a star on the page.\u201d The third one got a tag for its icon, \u201cFlexible styles\u201d for the title, and \u201cChoose different colors, styles, appear animations, and more with this widget\u201d for the text.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Final.jpg\" class=\"attachment-full size-full\" alt=\"Icon With Text Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Final-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Final-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Icon-With-Text-Final-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Thanks to Qi Addons for Elementor, adding interesting and useful designs to your website, such as the icon with text, can be easy and interesting. There\u2019s a variety of options you can choose from \u2013 many more than the ones we\u2019ve explored in this demonstration, and you should feel free to explore them all and find the best combination of elements this addon offers.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need to add an icon with text in WordPress? It can be a striking combination, so we&#8217;ve made it easy to add with our Qi Addons for Elementor plugin. <\/p>\n","protected":false},"author":9295,"featured_media":28857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[114,4,13],"class_list":["post-28795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28795"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28795\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28857"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}