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
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.
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.
Example
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:
