Home ▻ T4 Training▻Training▻Training Examples▻Icon Links

Icon Links

Creating Links with Icons

You can add any number of links, using a specific set of pre-made icons, to any page.  There is a maximum of three per line.  These are used to good effect on College and School homepages and they can be a visually appealing alternative to textual links or image-based links (e.g. landing page boxes) ... if the available icons match the links you're adding.

See the following examples.  The first 2 link to NUI Galway sites but the last goes to an external link so I have set it to open in a new tab:

How to add Icon Links to your page 

In order for icon links to show on your page you must add an 'Icon Link Placeholder' content first.

  1. Click on the +Add content button
    Add Content button to add content to section h27
  2. Using the Filter box, find the 'Icon Link Placeholder' content type and click on it
  3. Give the content a Name
  4. Wherever the 'Icon Link Placeholder' content type is located on your page, is where the icons will appear on your page.
  5. Using the Order column crosshairs Crosshairs image on Order column, drag and drop this content to where you want your icon links to appear on your page.
  6. The Icon Links will publish on the page in the order they are in your content type list

To add your icon links:

  1. Click on the +Add content button
    Add Content button to add content to section h27
  2. Using the Filter box, find the 'Icon Link' content type and click on it
  3. Give the content a Name
  4. Choose the Icon you want from the dropdown list,
  5. The default option - Clocktower - may need to be removed by clicking on the small x
  6. If you are linking to another section of the University of Galway website, click on the +Add section link button to choose the section.
    Button to add a section link to your page h27
    Or
    If you are linking to an external website, add the website address into the field called External URL
  7. Choose whether you want your link to Open in the current tab or in a new tab in the Link Behaviour dropdown.
  8. Add as many 'Icon Link' content types as you need to the same section, the maximum per line is 3

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's 'Page Customisation Keywords' field - see my interactive demonstration for full information.

Icon Choices

Here are the different icons you can choose from: