Photo of desk with computer monitor displaying Montclair State University website.

Icon Bars and Social Media Icons

The iconbar shortcode is used to present a row of up to five icons that:

  • Doesn’t take up the full width of the page in desktop view
  • Stays as one row in mobile

Building an iconbar element is relatively simple. First, create the iconbar shortcode, then place images inside it and then add links to the images.

Why only up to five icons? Remember that when you’re 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.

Example

Twitter logofacebook logoYoutube logo

Attributes

Iconbar has no attributes.

Code Sample

[iconbar]<a rel="noopener" href="https://twitter.com/#!/montclairstateu" target="_blank"><img src="https://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/06/twitter-smaller.svg" alt="Twitter logo" /></a><a rel="noopener" href="https://www.facebook.com/MontclairStateUniversity" target="_blank"><img src="https://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/06/facebook-smaller.svg" alt="facebook logo" /></a><a rel="noopener" href="https://www.youtube.com/montclairstate" target="_blank"><img src="https://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/06/youtube-smaller.svg" alt="Youtube logo" /></a>[/iconbar]

Icon Usage

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:

Remember that when you link to another website, you should always make that link open in a new window or tab.