All the font libraries that Iconic supports out-of-the-box are provided free, so it seemed only right to provide Iconic for free download too. But if you find this stack of help in your websites, please do consider a donation to support ongoing development and updates. Especially if there are updated font libraries that you want to see included. A lot of time was spent with adding many style and colour settings for you. Existing icon stacks typically only support a single icon library; whereas Iconic has over a dozen professional-grade icon sets ready to choose from.
Another major advantage of using Iconic is that all the icons and other associated resources are stored locally within your own website. This bodes well with making your website compliant with stringent privacy laws and reduces the risk of your website breaking if a third-party website (it relies on) for icons goes offline.
Another major advantage of using Iconic is that all the icons and other associated resources are stored locally within your own website. This bodes well with making your website compliant with stringent privacy laws and reduces the risk of your website breaking if a third-party website (it relies on) for icons goes offline.
Example
This is a single example of the Iconic stack configured using its default settings. Ordinarily you can display icons without a background fill, with complete control over their colour, opacity, sizing and alignment. Optional links can also be applied to icons, with support for custom attributes.Setup
To use Iconic, please follow these instructions carefully:- Download and install the Iconic stack, in the normal way.
- On a Stacks page type, open the Stacks Library and search for 'Iconic'.
- Drag and drop a copy of the stack into your page.
- If you page does not include an icon library* or you want to use a different one, set the configuration to Load Icons Only and press the blue button to add the desired library.
- For instances where your page already contains the desired icon library, set the configuration to Display An Icon. Enter the markup in the box shown and use the style and colour options provided to control the appearance of the icon.
- Preview you page to check the icon is showing correctly.
- Save the changes when done. Export or publish your website in the normal way.
* Check the page source code or developer tools to see if an icon library is being loaded already. For example, most ThemeFlood themes already include the Font Awesome Icon library, as shown on the theme product pages. If in doubt, ask on the forums for somebody to help you. It's wise not to load the same icon library more than once, because this will slow-down page loading and could introduce conflicts.
As always, all the style and colour settings display informational tooltips explaining what each setting does. Some of the number boxes let you specify your own units of measurement (e.g. px, rem, or em) to correspond with what your theme or framework already uses or you are most comfortable with using.
You only need to include an icon library once on the page. Icon libraries typically contain all the CSS code and font files or SVG images needed to display the icons. Multiple Iconic stacks can be safely used on the same page, for each icon you want to display. Alternatively you can type the markup for your icons inside other stacks, like ButtonBuilder.
