Navigation
The navigation used on this page is the ThemeKit Row Icon Nav which can use either SVGs, font icons or PNGs.
Follow the link below for a full description …
EverWeb ThemeKit
Responsive Icon Rows
Column A
GridThe columns are created using the CSS Grid Layout Module. At the maximum width there are 2, 3 or 4 columns with a width of one fractional unit.
At the first break point the layout changes to 2 columns and then 1 column on phones.
Column B
ItemsEach item has an icon, a heading, optional span, text and an optional link.
The links are inserted at the bottom of the container so that they stay aligned despite varying amounts of content.
Column C
IconsThe icons are SVGs which are more efficient and better quality than PNG or font icons.
The icons can be styled for size, color, border width and color, background color and padding.
Increasing the padding reduces the relative icon size.
Column D
SVGThe SVG icons are inserted using code for maximum efficiency.
Open the SVG folder included in the download folder, double click the required icon file to open it, copy the code and paste it into the widget settings.
Using SVGs
Using SVGs (scaleable Vector Graphic) for icons is much more efficient and creates better quality than PNG images or font icons like Font Awesome.
There are no images or large stylesheet to download. A folder of SVG icons is included in the ThemeKit Row download folder.
Select the required icon, double click it to open it in TextEdit.app set to plain text mode or a code editor, copy the code and paste it into the box in the widget settings.
Font Awesome Icons
Layout
GridThe grid can have 2, 3 or 4 columns in row 1.
Below the break point there are 2 columns and two rows and on mobile phones there is one column.
Items
Optional SpanThe icon, heading and text are default while the spans and links are an option.
Icons have controls for tab size, icon size and color, background, border width and color and shadow radius and color.
Links
OptionsThe optional links are at the bottom of the item and line up horizontally. They can open internal or external pages and have a new window option.
Row [4]Font Awesome
The widget uses V4 Font Awesome icons.. They are downloaded using the CDN by default. Those who have signed up with Font Awesome to get a user code can check a box and enter the ID number from their CSS link. This will automatically keep the icons up to date and make any new ones available.
Font icons are much more efficent than using PNGs but are much less efficient than using SVGs since they require a fairly large stylesheet with all the icons to be downloaded even if only a few are required.
PNG Icons
Column [1]
GridThe columns are created using the CSS Grid Layout Module. At the maximum width there are 2, 3 or 4 columns with a width of one fractional unit.
At the first break point the layout changes to 2 columns and then 1 column on phones.
Column [2]
ItemsEach item has an icon, a heading, optional colored span, text and an optional link.
The icons are PNG images sized at 48 x 48px for minimum effect on the page download time.
Column [3]
LinksLinks are turned on globally and line up horizontally at the bottom.
They can be configured to open internal or external pages and have a new window option.
Column [4]
AnimationThe optional CSS animation is a staggerred slide up when the item enters the viewport.
The keyframes and animation are removed from the HTML doc when not required.
PNGs
Using PNG image icons is not recommended since they require extra requests from the server and have a fairly large file size even for a small image.
The only good reason to use them is if they are custom made for a project or supplied by a client.