{"id":1353,"date":"2024-05-12T02:50:37","date_gmt":"2024-05-12T02:50:37","guid":{"rendered":"https:\/\/tableberg.com\/?post_type=docs&#038;p=1353"},"modified":"2025-06-29T15:44:46","modified_gmt":"2025-06-29T15:44:46","password":"","slug":"how-to-add-icons-to-wordpress-tables","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/ja\/docs\/how-to-add-icons-to-wordpress-tables\/","title":{"rendered":"\u30a2\u30a4\u30b3\u30f3\u30d6\u30ed\u30c3\u30af"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Tableberg\u3067WordPress\u306e\u30c6\u30fc\u30d6\u30eb\u306b\u30a2\u30a4\u30b3\u30f3\u3092\u8ffd\u52a0\u3059\u308b\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/obP04Z5ILxs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Icons are some graphical elements that are used in complementary textual content. They aid in quick comprehension and navigation. Using them, you can draw readers\u2019 attention to a notification, highlight important points, signify important actions, and others.<\/p>\n\n\n\n<p>\u3092\u6301\u3064\u3002 <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0\">\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/a> plugin, you can easily add a good collection of icons to your WordPress tables. This post will show you how to do this. So, let\u2019s get into the discussion of how to add icons to WordPress tables.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 01: Find and Add the Icon Block to the Table<\/h2>\n\n\n\n<p>Place your cursor on the cell where you want to add the block. Then, like any Gutenberg block, find the <strong>Icon block<\/strong> and add it to the cell by pressing the <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Icon-Block-to-the-Table-1024x523.webp\" alt=\"Find and Add the Icon Block to the Table\" class=\"wp-image-1354\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Icon-Block-to-the-Table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Icon-Block-to-the-Table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Icon-Block-to-the-Table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Icon-Block-to-the-Table.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can see that the Icon block has been added to the table.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/The-Icon-block-is-added.webp\" alt=\"The Icon block is added\" class=\"wp-image-1355\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/The-Icon-block-is-added.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/The-Icon-block-is-added-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/The-Icon-block-is-added-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/The-Icon-block-is-added-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 02: Configure Settings of the Icon Block<\/h2>\n\n\n\n<p>You may display this icon as a paragraph or a character from the <strong>Behave As option<\/strong> under the <strong>settings tab<\/strong>.<\/p>\n\n\n\n<p>Next, you can increase the <strong>Icon Size<\/strong> \u305d\u3057\u3066 <strong>Rotation<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Icon-Block-1024x523.webp\" alt=\"\" class=\"wp-image-1356\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Icon-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Icon-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Icon-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Icon-Block.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 03: Change the Icon from the Icon Library<\/h2>\n\n\n\n<p>Scroll down the page a bit. You\u2019ll get the <strong>Icon option<\/strong> from where you can change the default icon to the one you like.<\/p>\n\n\n\n<p>You can select icons from the library or import via URL.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Icon-from-the-Icon-Library.webp\" alt=\"Change the Icon from the Icon Library\" class=\"wp-image-1357\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Icon-from-the-Icon-Library.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Icon-from-the-Icon-Library-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Icon-from-the-Icon-Library-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Icon-from-the-Icon-Library-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 04: Stylize the Icon Block<\/h2>\n\n\n\n<p>Once the settings are done, come to the <strong>\u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>. You can customize the <strong>icon color, hover color, dimensions, marine, border,<\/strong> \u305d\u3057\u3066 <strong>radius<\/strong> of the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Icon-Block.webp\" alt=\"Stylize the Icon Block\" class=\"wp-image-1358\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Icon-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Icon-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Icon-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Icon-Block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>You can we have applied stylizations to the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylizations-applied-to-the-Icon-block.webp\" alt=\"Stylizations applied to the Icon block\" class=\"wp-image-1359\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylizations-applied-to-the-Icon-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylizations-applied-to-the-Icon-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylizations-applied-to-the-Icon-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylizations-applied-to-the-Icon-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>By the Icon block, you can effectively convey complex information, ease navigation, and create visually engaging tables that captivate and inform visitors.<\/p>\n\n\n\n<p>Before closing this article, you can check this documentation on <a href=\"https:\/\/tableberg.com\/ja\/%e8%ab%b8%e6%b3%a8%e6%84%8f\/tableberg-one\/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%83%90%e3%83%bc%e3%82%b0\/how-to-add-styled-lists-in-wordpress-tables\/\" target=\"_blank\" rel=\"noopener\" title=\"how to add Styled Lists to WordPress tables\">how to add Styled Lists to WordPress tables<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Icons are some graphical elements that are used in complementary textual content. They aid in quick comprehension and navigation. Using them, you can draw readers&#8217; attention to a notification, highlight important points, signify important actions, and others. With the TableBerg plugin, you can easily add a good collection of icons to your WordPress tables. This post will show you how to do this. So, let&#8217;s get into the discussion of how to add icons to WordPress tables. Step 01: Find and Add the Icon Block to the Table Place your cursor on the cell where you want to add the block. Then, like any Gutenberg block, find the Icon block [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"doc_category":[94],"doc_tag":[78,46,54],"class_list":["post-1353","docs","type-docs","status-publish","hentry","doc_category-sub-blocks","doc_tag-icon-block","doc_tag-list-block","doc_tag-table-borders"],"year_month":"2026-04","word_count":298,"total_views":"0","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"name":"\u30a4\u30b9\u30c6\u30a3\u30a2\u30af\u30fb\u30ec\u30a4\u30cf\u30f3","author_nicename":"wpx_irayhan","author_url":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"doc_category_info":[{"term_name":"Sub-Blocks","term_url":"https:\/\/tableberg.com\/ja\/docs-category\/sub-blocks\/"}],"doc_tag_info":[{"term_name":"Icon Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/icon-block\/"},{"term_name":"List Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/list-block\/"},{"term_name":"Table Borders","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/table-borders\/"}],"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=1353"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1353\/revisions"}],"predecessor-version":[{"id":9877,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1353\/revisions\/9877"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=1353"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_category?post=1353"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_tag?post=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}