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.
Iconbar has no attributes.
[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]
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.