{"id":2634,"date":"2024-07-29T15:39:21","date_gmt":"2024-07-29T19:39:21","guid":{"rendered":"https:\/\/sites.georgetown.edu\/1789-documentation\/?page_id=2634"},"modified":"2024-08-19T15:18:45","modified_gmt":"2024-08-19T19:18:45","slug":"how-to-icon-grid","status":"publish","type":"page","link":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/","title":{"rendered":"How To: Icon Grid"},"content":{"rendered":"\n<h2 class=\"wp-block-heading body-text-heading\">Adding the Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph body-text\">To add the Icon Grid block, click the \u201c+\u201d symbol and search for \u201cIcon Grid\u201d. Then select the Icon Grid block icon.<\/p>\n\n\n<div class=\"gu-block gu-block-image\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"289\" src=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png\" alt=\"icon card deck search with the &quot;+&quot; button and icon card deck icon highlighted with a red box\" class=\"wp-image-788\" srcset=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png 337w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search-300x257.png 300w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph body-text\">The Icon Card Deck editor will open with a default of three Icon Cards with fields for an icon class, a title, and an optional description.<\/p>\n\n\n\n<h2 class=\"wp-block-heading body-text-heading\">Editing an Icon Card Deck<\/h2>\n\n\n\n<p class=\"wp-block-paragraph body-text\">To add content to a card, click on one of the cards in the deck.<\/p>\n\n\n\n<p class=\"wp-block-paragraph body-text\">You can search for different icon options from the <a href=\"https:\/\/sites.georgetown.edu\/block-catalog\/formatting\/icons\/font-awesome\/\">Font Awesome Icon list<\/a>. Once you have found an icon you like, copy the class name and paste it into the Icon Class field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph body-text\">Next, add text associated with the icon in the Title and Description fields.<\/p>\n\n\n<div class=\"gu-block gu-block-image\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor-1024x476.png\" alt=\"A filled out Icon card in the WordPress editor.\" class=\"wp-image-1417\" style=\"width:512px;height:238px\" srcset=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor-1024x476.png 1024w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor-300x139.png 300w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor-768x357.png 768w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor-660x307.png 660w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-card-editor.png 1089w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph body-text\">To create a link using the icon, click on the card and go to the block tab of the inspector panel on the right. Toggle the &#8220;Clickable icon&#8221; option on and add your URL in the text box below.<\/p>\n\n\n<div class=\"gu-block gu-block-image\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"942\" src=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings.png\" alt=\"The icon card deck inspector panel with link options highlighted in a red box.\" class=\"wp-image-1418\" style=\"width:291px;height:471px\" srcset=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings.png 581w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-185x300.png 185w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-249x404.png 249w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-498x808.png 498w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-305x495.png 305w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-271x439.png 271w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-542x879.png 542w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-463x750.png 463w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2022\/02\/icon-cd-settings-411x667.png 411w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph body-text\">To add more cards to the deck, click the plus sign at the bottom of the block editor.<\/p>\n\n\n<div class=\"gu-block gu-block-image\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"603\" src=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block.png\" alt=\"icon card deck block with &quot;+&quot; button highlighted with a red box\" class=\"wp-image-790\" srcset=\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block.png 511w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block-254x300.png 254w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block-342x404.png 342w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block-419x495.png 419w, https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_block-372x439.png 372w\" sizes=\"(max-width: 511px) 100vw, 511px\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Adding the Block To add the Icon Grid block, click the \u201c+\u201d symbol and search for \u201cIcon Grid\u201d. Then select the Icon Grid block icon. The Icon Card Deck editor will open with a default of three Icon Cards with fields for an icon class, a title, and an optional description. Editing an Icon Card [&hellip;]<\/p>\n","protected":false},"author":1387,"featured_media":0,"parent":214,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"page-chaptered.php","meta":{"gu_featured_image_display":true,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-2634","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To: Icon Grid - 1789 Handbook<\/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:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To: Icon Grid - 1789 Handbook\" \/>\n<meta property=\"og:description\" content=\"Adding the Block To add the Icon Grid block, click the \u201c+\u201d symbol and search for \u201cIcon Grid\u201d. Then select the Icon Grid block icon. The Icon Card Deck editor will open with a default of three Icon Cards with fields for an icon class, a title, and an optional description. Editing an Icon Card [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"1789 Handbook\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-19T19:18:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sites.georgetown.edu\/1789-documentation-clone2\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/\",\"url\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/\",\"name\":\"How To: Icon Grid - 1789 Handbook\",\"isPartOf\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png\",\"datePublished\":\"2024-07-29T19:39:21+00:00\",\"dateModified\":\"2024-08-19T19:18:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage\",\"url\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png\",\"contentUrl\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png\",\"width\":337,\"height\":289,\"caption\":\"icon card deck search with the \\\"+\\\" button and icon card deck icon highlighted with a red box\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Catalog\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Informational\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Icon Grid\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How To: Icon Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/#website\",\"url\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/\",\"name\":\"1789 Handbook\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To: Icon Grid - 1789 Handbook","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:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/","og_locale":"en_US","og_type":"article","og_title":"How To: Icon Grid - 1789 Handbook","og_description":"Adding the Block To add the Icon Grid block, click the \u201c+\u201d symbol and search for \u201cIcon Grid\u201d. Then select the Icon Grid block icon. The Icon Card Deck editor will open with a default of three Icon Cards with fields for an icon class, a title, and an optional description. Editing an Icon Card [&hellip;]","og_url":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/","og_site_name":"1789 Handbook","article_modified_time":"2024-08-19T19:18:45+00:00","og_image":[{"url":"https:\/\/sites.georgetown.edu\/1789-documentation-clone2\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/","url":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/","name":"How To: Icon Grid - 1789 Handbook","isPartOf":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage"},"image":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png","datePublished":"2024-07-29T19:39:21+00:00","dateModified":"2024-08-19T19:18:45+00:00","breadcrumb":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#primaryimage","url":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png","contentUrl":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2021\/12\/icon_card_deck_search.png","width":337,"height":289,"caption":"icon card deck search with the \"+\" button and icon card deck icon highlighted with a red box"},{"@type":"BreadcrumbList","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/how-to-icon-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/"},{"@type":"ListItem","position":2,"name":"Block Catalog","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/"},{"@type":"ListItem","position":3,"name":"Informational","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/"},{"@type":"ListItem","position":4,"name":"Icon Grid","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/informational\/icon-grid\/"},{"@type":"ListItem","position":5,"name":"How To: Icon Grid"}]},{"@type":"WebSite","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/#website","url":"https:\/\/sites.georgetown.edu\/1789-documentation\/","name":"1789 Handbook","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sites.georgetown.edu\/1789-documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/2634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/users\/1387"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/comments?post=2634"}],"version-history":[{"count":2,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/2634\/revisions"}],"predecessor-version":[{"id":2894,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/2634\/revisions\/2894"}],"up":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/214"}],"wp:attachment":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/media?parent=2634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}