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 noreferrer" href="/wp-content/uploads/sites/144/2024/12/twitter-smaller.svg" target="_blank"><img 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 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 src="http://www.montclair.edu/university-communications/wp-content/uploads/sites/144/2024/12/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:
