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.
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]