{"id":6068,"date":"2024-12-13T19:17:27","date_gmt":"2024-12-13T19:17:27","guid":{"rendered":"https:\/\/tableberg.com\/?p=6068"},"modified":"2024-12-13T19:18:19","modified_gmt":"2024-12-13T19:18:19","slug":"como-adicionar-icones-facilmente-ao-seu-site-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/","title":{"rendered":"Como adicionar \u00edcones facilmente ao seu site WordPress"},"content":{"rendered":"\n<p>Icons might seem like small details, but they hold the power to completely change how a website feels and functions. Think of a WordPress site without icons\u2014just walls of text and plain links.&nbsp;<\/p>\n\n\n\n<p>Whether you\u2019re a blogger trying to make posts pop or a business owner highlighting your services, icons do the heavy lifting of guiding users and making information stick.&nbsp;<\/p>\n\n\n\n<p>In this guide, we\u2019ll walk you through two simple methods: the <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>Ultimate Blocks<\/strong><\/a> Plugin for general icon use and the <strong><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noopener\">Tableberg<\/a><\/strong> Plugin for adding icons to tables. Let\u2019s dive in.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-3f46901b-1bb4-4bc1-b7eb-90fbb111437f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"background-color: #d4e8ec; color: #14111f; \">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\"><strong>How to Add Icons in WordPress<\/strong><\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"color: #14111f; \">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"background-color: #d4e8ec; color: #14111f; \">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#0-method-1-using-the-ultimate-blocks-plugin-\" style=\"\">Method 1: Using the Ultimate Blocks Plugin<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#1-step-1-install-ultimate-blocks-\" style=\"\">Step 1: Install Ultimate Blocks<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#2-step-2-add-the-icon-block-\" style=\"\">Step 2: Add the Icon Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#3-step-3-select-and-add-an-icon-\" style=\"\">Step 3: Select and Add an Icon<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#4-step-4-adjust-the-icon-appearance-\" style=\"\">Step 4: Adjust the Icon Appearance<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#5-step-5-save-your-work-\" style=\"\">Step 5: Save Your Work<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#6-method-2-using-the-tableberg-plugin-\" style=\"\">Method 2: Using the Tableberg Plugin<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#7-step-1-install-tableberg-\" style=\"\">Step 1: Install Tableberg<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#8-step-2-create-a-new-table-\" style=\"\">Step 2: Create a New Table<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#9-step-3-add-an-icon-to-a-cell-\" style=\"\">Step 3: Add an Icon to a Cell<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#10-step-4-customize-the-icon-\" style=\"\">Step 4: Customize the Icon<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-easily-add-icons-to-your-wordpress-site\/#11-step-5-save-the-table-\" style=\"\">Step 5: Save the Table<\/a><\/li><\/ul><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-using-the-ultimate-blocks-plugin-\"><strong>Method 1: Using the Ultimate Blocks Plugin<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/tableberg.com\/ultimate-blocks-review\/\">Ultimate Blocks<\/a> is a perfect solution for anyone looking for a quick and straightforward way to add icons to posts or pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-1-install-ultimate-blocks-\"><strong>Step 1: Install Ultimate Blocks<\/strong><\/h3>\n\n\n\n<p>Go to your WordPress dashboard, then navigate to <strong>Plugins &gt; Add New<\/strong>. Look for <strong>\u201cUltimate Blocks\u201d <\/strong>using the search bar. Once found, click <strong>Install<\/strong> and then <strong>activate<\/strong> the plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"392\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-1024x392.png\" alt=\"Install Ultimate Blocks\" class=\"has-border-color has-primary-accent-border-color wp-image-6069\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-1024x392.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-300x115.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-768x294.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-1536x588.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.1-1.png 1895w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-2-add-the-icon-block-\"><strong>Step 2: Add the Icon Block<\/strong><\/h3>\n\n\n\n<p>From your WordPress editor, jump to the post or page where you need to place an icon. Click on the <strong>Block Inserter<\/strong> (&#8220;<strong>+<\/strong>&#8221; button), type <strong>\u201cIcon\u201d<\/strong> in the search bar, and choose the Ultimate Blocks <strong>Icon Block.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-1024x424.png\" alt=\"Add the Icon Block\" class=\"has-border-color has-primary-accent-border-color wp-image-6073\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-1024x424.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-300x124.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-768x318.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-1536x636.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.2-1.png 1740w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-3-select-and-add-an-icon-\"><strong>Step 3: Select and Add an Icon<\/strong><\/h3>\n\n\n\n<p>Next, you need to click on the<strong> \u201cIcon Library\u201d <\/strong>option to open the icon library. There, you\u2019ll find appropriate WordPress icons along with Font Awesome icons.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1-1024x479.png\" alt=\"Click on the \u201cIcon Library\u201d option to open the icon library.\" class=\"has-border-color has-primary-accent-border-color wp-image-6071\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1-1024x479.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1-300x140.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1-768x359.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3-1.png 1531w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, you can browse through all the available options in the library and search for the specific one using keywords. Once you\u2019ve found your desired icon, click on it to insert the icon in your content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-1024x466.png\" alt=\"Choose the preferred icon. \" class=\"has-border-color has-primary-accent-border-color wp-image-6072\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-1024x466.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-300x136.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-768x349.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-1536x699.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.3.1.png 1649w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-step-4-adjust-the-icon-appearance-\"><strong>Step 4: Adjust the Icon Appearance<\/strong><\/h3>\n\n\n\n<p>Now, if you need to customize your icons, move to the right side of the dashboard and open the Blocks settings in the sidebar. From the <strong>General<\/strong> Settings tab, you can resize and rotate the icon as needed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-1024x468.png\" alt=\"Customize size and rotation from the general tab. \" class=\"has-border-color has-primary-accent-border-color wp-image-6070\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-1024x468.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-300x137.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-768x351.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-1536x702.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.1.png 1640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you swap to the <strong>Styles<\/strong> settings, you can change the colors, border, or other details.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2-1024x637.png\" alt=\"Change the colors, border, or other details from the Styles tab. \" class=\"has-border-color has-primary-accent-border-color wp-image-6089\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2-1024x637.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2-300x187.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2-768x478.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2-18x12.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.4.2.png 1205w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-5-save-your-work-\"><strong>Step 5: Save Your Work<\/strong><\/h3>\n\n\n\n<p>Check the icon placement and customization. Once everything is in order, click <strong>Publish<\/strong> or <strong>Update<\/strong> to save your page or post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-1024x495.png\" alt=\"Click Update or Publish\" class=\"has-border-color has-primary-accent-border-color wp-image-6090\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-1024x495.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-300x145.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-768x371.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-1536x742.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/1.5.png 1567w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-method-2-using-the-tableberg-plugin-\"><strong>Method 2: Using the Tableberg Plugin<\/strong><\/h2>\n\n\n\n<p>Tableberg is ideal for those looking to incorporate icons into structured layouts like tables.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-1-install-tableberg-\"><strong>Step 1: Install Tableberg<\/strong><\/h3>\n\n\n\n<p>Again, log in to your WordPress dashboard, go to <strong>Plugins &gt; Add New<\/strong>, and search for <strong>\u201cTableberg\u201d<\/strong>. Once found, <strong>Install<\/strong> and <strong>activate<\/strong> the plugin.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-1024x425.png\" alt=\"\" class=\"has-border-color has-primary-accent-border-color wp-image-6074\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-1024x425.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-300x124.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-768x319.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-1536x637.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.1-2.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-2-create-a-new-table-\"><strong>Step 2: Create a New Table<\/strong><\/h3>\n\n\n\n<p>Open your WordPress editor and add a new Tableberg block. This can be done by clicking the <strong>Block Inserter<\/strong> (&#8220;<strong>+<\/strong>&#8221; button), typing <strong>&#8220;Tableberg&#8221;<\/strong> in the search bar, and selecting the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-1024x473.png\" alt=\"\" class=\"has-border-color has-primary-accent-border-color wp-image-6077\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-1024x473.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-300x139.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-768x355.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-1536x710.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.2-original.png 1623w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-step-3-add-an-icon-to-a-cell-\"><strong>Step 3: Add an Icon to a Cell<\/strong><\/h3>\n\n\n\n<p>First, choose the order for your table and create your table. Later, fill your table with appropriate blocks and content.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1-1024x569.png\" alt=\"\" class=\"has-border-color has-primary-accent-border-color wp-image-6076\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1-1024x569.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1-300x167.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1-768x427.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.1.png 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you\u2019re done, select the cell where you want to place the icon. Click on the \u201c<strong>+<\/strong>\u201d sign and search for the <strong>Icon<\/strong> block. Once you\u2019ve found it, click on it to insert it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2-1024x513.png\" alt=\"\" class=\"has-border-color has-primary-accent-border-color wp-image-6078\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2-1024x513.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2-300x150.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2-768x385.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.2.png 1524w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A default icon will be placed in the predefined place. If you need an alternate icon, move to the icon section on the side panel of your dashboard and either search or scroll down to pick your desired icon from the library. You can also import your preferred icon through a URL.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3-1024x553.png\" alt=\"\" class=\"has-border-color has-primary-accent-border-color wp-image-6079\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3-1024x553.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3-300x162.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3-768x415.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.3.3.png 1388w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-4-customize-the-icon-\"><strong>Step 4: Customize the Icon<\/strong><\/h3>\n\n\n\n<p>Once you\u2019ve added your preferred icon, you can start customizing it. Start by clicking the icon you want to customize. This will open the Block Setting. If not, open it from the right side of your dashboard. From the General settings, you can adjust the size, rotation, and how you want your icon to behave as.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1-1024x553.png\" alt=\"Customize size, rotation, and icon behavior from the general tab. \" class=\"has-border-color has-primary-accent-border-color wp-image-6080\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1-1024x553.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1-300x162.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1-768x415.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.1.png 1389w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And if you move to the Styles tab, you can change the colors, border, or other details.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2-1024x531.png\" alt=\"Change the colors, border, or other details from the Styles tab. \" class=\"has-border-color has-primary-accent-border-color wp-image-6081\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2-1024x531.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2-300x156.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2-768x398.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.4.2.png 1446w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-5-save-the-table-\"><strong>Step 5: Save the Table<\/strong><\/h3>\n\n\n\n<p>After completing your table and customizing the icon, click Save or Update to keep your changes. Preview the table to ensure the icon looks perfect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-1024x495.png\" alt=\"Click Update or Publish\" class=\"has-border-color has-primary-accent-border-color wp-image-6091\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-1024x495.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-300x145.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-768x371.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-1536x742.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/2.5.png 1567w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"12-conclusion-\"><strong>Conclusion<\/strong><\/h4>\n\n\n\n<p>Icons are a simple way to make your WordPress site stand out and guide users without overloading them with text. They bring clarity, style, and purpose all at once, and adding them doesn\u2019t have to be complicated. This is why we\u2019ve created this guide to help you add icons in WordPress and make the process simple and straightforward.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icons might seem like small details, but they hold the power to completely change how a website feels and functions. Think of a WordPress site without icons\u2014just walls of text and plain links.&nbsp; Whether you\u2019re a blogger trying to make posts pop or a business owner highlighting your services, icons do the heavy lifting of [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6083,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-6068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/12\/Add-Icons-in-wordpress-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/6068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=6068"}],"version-history":[{"count":9,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/6068\/revisions"}],"predecessor-version":[{"id":6097,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/6068\/revisions\/6097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/6083"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=6068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=6068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=6068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}