Icons often play a big part in sites these days. These can be added to your sites in various ways e.g. as regular images, as SVGs or as icon fonts.
In Source we would generally recommend using SVGs for your icons. These are very lightweight in terms of code and by using this approach you can simply add the icons that you need as opposed to loading a full library (such as Font Awesome). Read more about using SVGs in Source.
How to enable Font Awesome in Source
A popular option for icons is Font Awesome. Source doesn't automatically load the Font Awesome library (which will contain a whole load of icons that you will never use and therefore adds unnecessary weight to your page). However, we understand that many people will want to be able to use FA from within their Source projects and so we have added a way for you to easily enable the library if you wish. In order to do this, simply drag the Font Awesome (Enabler) stack onto the page.
Once it is added then you can add FA to the page by finding and adding the code snippets for your desired icons. e.g. <i class="fa fa-bullhorn"></i>. This can be added to any of the Source stacks (e.g. paragraph, header, button etc)
Creating a Social icons / Social bar
Another common approach when working with icons is to create a groups of icons to create the likes of a 'social bar'. A good approach for this is to use a Source Grid (or Grid Plus) stack and add either icons, svgs or images etc into each item. You can easily (and freely) find SVG versions of all popular brands online. You can see examples of this approach in our demo projects.
A useful listing for free SVG images is: https://superdevresources.com/free-svg-icons/
