Layers Framework: Icon Fonts

Layers Framework

Last Updated: Time to Read: 1 minute

Layers includes a set of custom icon fonts for meta and interface display. Icon fonts offer an advantage over using sprites in that they load faster, are easier to support by the browser, and can be customized via CSS alone. The following provides an outline of which icons are available by default and their associated CSS classes.

Icon fonts are defined in the assets/css/layers-icon.css file

When building custom templates or widgets using the Layers Framework, Layers icons can be pulled in just like an other icon font, or you can use layers_post_meta() to automatically generate a meta element including the icon as seen in content-single.php

Below is an example of how a Layers Icon could be used directly for customization of the single post header.

<i class="l-search"></i>
<i class="l-shopping-cart"></i>
<i class="l-user"></i>
<i class="l-clock-o"></i>
<i class="l-tags"></i>
<i class="l-comment-o"></i>
<i class="l-folder-open-o"></i>
<i class="l-menu"></i>
<i class="l-top-arrow"></i>
<i class="l-bottom-arrow"></i>
<i class="l-right-arrow"></i>
<i class="l-left-arrow"></i>
<i class="l-close"></i>

 

 

Layers Icons use a proprietary font that would not be practical to modify for the purpose of Layers Child Theming or Extension development. Instead, you can create your own icon font including any additions using a framework such as icomoon.io or you may include fontawesome in your plugin or child theme.