Scaleable Vector Graphics (SVGs) are used for icons in modern web design. They be should used in oreference to font icons like FontAwesoms andto replace any PNG icons which should never be used on a responsive website.
All the new ThemeKit responsive widgets by EverWeb Widgets have a link in the "Read me furst" in the download folderr toaccess 100s of icons on three groups - Custom, IOS and Material Design.
Double clip the .svg file to open it in TextEdit.app or a code editor, copy the code and insert it into the SVG box in the widget settings.
The items are inserted in a grid created using the CSS Grid Layout Moduke.
The number of items per row is set for each device type.
Items have controls for adding a borer with a radius control and/or a bottom box shadow.
Each item is an HTML5 <article> with a header, SVG icon, heading, text and a full width link.
Use SVG icons to replace those created with PNG images for faster download in the browser.
Open the file in TextEdit. app, copy the code and paste it into the SVG box widget in the settings.
The call to action links can be configured globally to open internal or external pages.
The CSS Grid Layout modul is used to allow the number of items per row to be set for each device type.
The grid has an optional main heading which has controls for text shadow and letter spacing to thicken up Googlehosted font with only one font weight.
The ThemeKit UI Social Share Tabs widget has all the popular social media icons inserted to turn on by checking a box as required.
The first link is optional and can use any icon to create an internal link.
There are check boxes to to insert a spam protect email function and a phone number/phone call function
The icons show a tooltip with the destination name on hover or click. On mobile touch devices the tooltips have a tap to go function. Tapping another icon or anywhere else on the device screen will hide the open tooltip.