{"id":3588,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3588"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"icon-bars-and-social-media-icons","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/icon-bars-and-social-media-icons\/","title":{"rendered":"Icon Bars and Social Media Icons"},"content":{"rendered":"<p>The <strong>iconbar<\/strong> shortcode is used to present a row of up to five icons that:<\/p>\n<ul>\n<li>Doesn\u2019t take up the full width of the page in desktop view<\/li>\n<li>Stays as one row in mobile<\/li>\n<\/ul>\n<p>Why only up to five icons? Remember that when you\u2019re building a responsive website you must keep mobile users in mind. If we make tappable items (like icons and links) too small it will be difficult for phone users to tap on them without hitting the wrong icon by mistake.<\/p>\n<p>Building an iconbar element is relatively simple. First, create the iconbar shortcode, then place images inside it and add links to the images. Remember that when you link to another website, you should always make that link open in a new window or tab.<\/p>\n<h2>Example<\/h2>\n<div class=\"prpl-icon-bar\"><a rel=\"noopener noreferrer\" href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg\" alt=\"Twitter logo\"\/><\/a><a rel=\"noopener noreferrer\" href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg\" alt=\"facebook logo\"\/><\/a><a rel=\"noopener noreferrer\" href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg\" alt=\"Youtube logo\"\/><\/a><\/div>\n<h2>Attributes<\/h2>\n<p>Iconbar has no attributes.<\/p>\n<h2>Code Sample<\/h2>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&#x5B;iconbar]&lt;a rel=&quot;noopener noreferrer&quot; href=&quot;\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg&quot; alt=&quot;Twitter logo&quot;&gt;&lt;\/a&gt;&lt;a rel=&quot;noopener noreferrer&quot; href=&quot;\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg&quot; alt=&quot;facebook logo&quot;&gt;&lt;\/a&gt;&lt;a rel=&quot;noopener noreferrer&quot; href=&quot;\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg&quot; alt=&quot;Youtube logo&quot;&gt;&lt;\/a&gt;&#x5B;\/iconbar]<\/pre>\n<h2>Icon Usage<\/h2>\n<p>In order to maintain a consistent look across the website and also to ensure that your website will display correctly on all devices, use the following icons:<\/p>\n<div class=\"prpl-row\"><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/email-smaller.svg\" class=\"attachment-full size-full\" alt=\"Email Logo\" \/><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/email-smaller.svg\">Email<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg\" class=\"attachment-full size-full\" alt=\"Facebook Logo\" \/><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/facebook-smaller.svg\">Facebook<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/instagram-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/instagram-smaller.svg\" class=\"attachment-full size-full\" alt=\"Instagram Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/instagram-smaller.svg\">Instagram<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/linked-in-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/linked-in-smaller.svg\" class=\"attachment-full size-full\" alt=\"LinkedIn Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/linked-in-smaller.svg\">LinkedIn<\/a><\/p>\n<\/div><\/div>\n<div class=\"prpl-row\"><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/pinterest-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/pinterest-smaller.svg\" class=\"attachment-full size-full\" alt=\"Pinterest Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/pinterest-smaller.svg\">Pinterest<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/snapchat-smaller.svg\" class=\"attachment-full size-full\" alt=\"Snapchat logo\" \/><\/figure>\n<p><a href=\"http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/snapchat-smaller.svg\">Snapchat<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/tumblr-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/tumblr-smaller.svg\" class=\"attachment-full size-full\" alt=\"Tumblr Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/tumblr-smaller.svg\">Tumblr<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg\" class=\"attachment-full size-full\" alt=\"Twitter Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-smaller.svg\">Twitter<\/a><\/p>\n<\/div><\/div>\n<div class=\"prpl-row\"><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg\" class=\"attachment-full size-full\" alt=\"YouTube logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/youtube-smaller.svg\">YouTube<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/meetup-small.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/meetup-small.svg\" class=\"attachment-full size-full\" alt=\"Meetup Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/meetup-small.svg\">Meetup<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/tik-tok-smaller.svg\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/tik-tok-smaller.svg\" class=\"attachment-full size-full\" alt=\"TikTok Logo\" \/><\/a><\/figure>\n<p><a href=\"\/wp-content\/uploads\/sites\/144\/2024\/12\/tik-tok-smaller.svg\">TikTok<\/a><\/p>\n<\/div><div class=\"prpl-column one-fifth\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-x-smaller-blac.svg\" class=\"attachment-full size-full\" alt=\"X Logo\" \/><\/figure>\n<p><a href=\"http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/twitter-x-smaller-blac.svg\">X (formerly twitter)<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The iconbar shortcode is used to present a row of up to five icons that: Doesn\u2019t take up the full width of the page in desktop view Stays as one row in mobile Why only up to five icons? Remember that when you\u2019re building a responsive website you must keep mobile users in mind. If [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":23,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3588","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3588"}],"version-history":[{"count":20,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3588\/revisions"}],"predecessor-version":[{"id":3860,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3588\/revisions\/3860"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}