3 Min.x, pro, cornerstone

Font Awesome Pro

A great library of icons integrated and included with all Themeco Products

Controls
SVG Support
Adding Icons in Manually
See Also

Included with all Themeco Products is the library Font Awesome. These icons can be used on the frontend site as well as in your parameters controls. The current bundled version of Font Awesome is version 6. Every icon type except Duotone is supported.

Controls

Each Font Awesome type can be controled in Theme Options in the Font Awesome section. The default loading type can also be control from Webfont to SVG. More notes on SVG later.

Standard controls for selecting an icon.

SVG Support

Font Awesome SVGs can be used in place of the Webfonts for a fairly signaficant performance increase. This requires PHP Zip and then changing the Theme Options icon load type to SVG.

PHP Zip can be installed on your server sometimes through the cpanel. It will vary based on the server and hosting provider.

For example, on debian based systems it will look like the following.

sudo apt install php-zip

SVGs come packaged to you in a zip file. When SVGs are being used this zip file will be unzipped. If your host has limits on the numbers of files you are recommended to not use this or switch hosting providers.

SVG icons are currently not supported on the audio and video elements and will load in the Webfonts when these elements are placed on a post.

Adding Icons in Manually

SVG

You can get the SVG output of an icon via the fa_get_svg_output function. You pass icon name and the type through the function.

$catSVG = fa_get_svg_output('cat');
echo $catSVG;

Webfonts

Webfonts can also be manually added through an <i> tag along with a the glph inside of a special data attribute posted below.

From an icon name you can grab the proper attributes through the fa_get_attr

$icon_data = fa_get_attr('angles-down');
cs_tag('i', [
    $icon_data['attr'] => $icon_data['entity'],
], '');

The following are the data attributes for each Font Awesome icon type.

data-x-icon-b for brand and social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.
data-x-icon-l for light icons.
data-x-icon-sr for sharp regular icons.
data-x-icon-ss for sharp solid icons.
data-x-icon-sl for sharp light icons.

Controls

SVG Support

Adding Icons in Manually

SVG

Webfonts

See Also