The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the height equal by stretching each item to the same height as the tallest one in any row.
The icons used on this page were created in Keynote, cropped out at 128px square, opened in Preview.app to remove the background with the instant alpha tool and converted to PNGs.
The icon size can be adjust and it can have a border and/or a box shadow.
There is a border radius control and a checkbox for use with round icons.
The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The linkcan be configured to open internal or external pages using relative and absolute file paths. There is a checkbox to turn on the function to open the link in a new window.
The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the height equal by stretching each item to the same height as the tallest one in any row.
The icons are from the Ionicon range and are an alternative to the Font Awesome icons which just about every other website uses.
The link below will open the Ionicon Cheatsheet which is hosted on the EverWeb Widgets website.
The icon size can be adjusted in relation to its container. The container can be round or square and have a border and/or a box shadow.
The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The linkcan be configured to open internal or external pages using relative and absolute file paths. There is a checkbox to turn on the function to open the link in a new window.
The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the height equal by stretching each item to the same height as the tallest one in any row.
The icons are from the Font Awesome range and are used on zillions of websites.
The link below will open the Font Awesome Cheatsheet which is hosted on the EverWeb Widgets website.
The icon size can be adjusted in relation to its container. The container can be round or square and have a border and/or a box shadow.
The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The linkcan be configured to open internal or external pages using relative and absolute file paths. There is a checkbox to turn on the function to open the link in a new window.