Feather Icons Plugin

Introduction

The Feather Icons Plugin is an elegant and versatile solution for integrating Feather icons into your website. This guide will help you understand how to effectively utilize the plugin to enhance your site's visual appeal with these beautifully designed icons. 

For a complete list of available icons and their respective names, please scroll through this documentation or visit the Feather Icons website.

Enabling the Plugin

1. Launch the Publii application and navigate to the Tools & Plugins section.
2. Locate the Feather Icons plugin from the list of available plugins.
3. Enable it by clicking the switch button located at the bottom-left corner of the plugin's tile.

Plugin Configuration

After activating the plugin, you will find various configuration options that allow you to customize the appearance and behavior of the Feather icons on your website.

Basic options

This section provides settings for customizing the default properties of the icons.

• Icon Size: Set the default size for the icons. The size is specified as a number that will be combined with the selected unit.
• Icon Size Unit: Choose the unit of measurement for the icon size. Available options include 'px' (pixels), 'em', 'rem', 'vw' (viewport width), 'vh' (viewport height), 'vmin' (viewport minimum), and 'vmax' (viewport maximum).
• Stroke Width: Adjust the stroke width of the icons. This setting determines the thickness of the icon lines and is defined in pixels.
• Stroke Color Option: Select between using the current color or custom color for the icon stroke. The 'Use Current Color' option will inherit the color from the surrounding text or element.
• Custom Stroke Color: Specify a custom color for the icon stroke when 'Custom Color' is selected. This setting uses a color picker to control the stroke color precisely.
• Vertical Align: Choose the vertical alignment for the icons. Options include 'baseline', 'bottom', 'middle', 'sub', 'super', 'text-top', 'text-bottom', 'top', and a custom value for precise alignment.
• Custom Vertical Align Value: Define a custom value for vertical alignment when the 'Custom values' option is selected. This allows for specific adjustments like '-5px', '0.5em', or '5%' to align the icon perfectly with adjacent elements.

Advanced options

These options provide additional settings for accessibility and advanced customization.

• ARIA Hidden Attribute: Set the default value for the 'aria-hidden' attribute to improve accessibility. This option plays a crucial role in enhancing the accessibility of your website and allows you to define the default state of the 'aria-hidden' attribute for the icons.
  • True: When set to 'true', the 'aria-hidden' attribute will be applied to the icons by default. This means that assistive technologies, like screen readers, will ignore these icons. It's particularly useful when icons are used for decorative purposes and don't convey essential information.
  • False: If set to 'false', the 'aria-hidden' attribute will not be included in the icon's HTML markup, allowing screen readers to interpret the icons as part of the content. 
• Icon Loading Method: Choose how the icons should be loaded on the production site:
  • Use SVG Map File: This method involves loading SVG maps from a separate file (the file size is approximately 60KB; when compressed using gzip, it reduces to about 10KB. ). It offers enhanced organization and cleaner HTML code. However, it may increase page load times due to an additional server request for the SVG file.
  • Use Inline SVG Code: This approach embeds SVG directly within the HTML. It results in faster page loading by eliminating the need for an additional server request. However, it can increase the overall code size of your site, which might affect readability and maintenance.

  Please note: For websites with a few icons, inline SVG code is generally the best choice for faster page loading and easier implementation. However, for websites with many icons, an SVG map file can be a better option to maintain cleaner and more organized HTML, even though it may slightly increase page load times.

Using the Plugin

Feather Icons can be used in various parts of your site, including posts, menus, footers, etc. You can either use the default settings configured in the plugin or override them with specific attributes in the shortcode. The plugin allows customization of each icon's appearance directly within the shortcode. You can modify the size, color, stroke width,  and aria-hidden attributes or add your own CSS to suit your design needs.

When using our custom shortcode for icons, please follow the specific order of attributes outlined below. This order is essential for the correct rendering of icons.

The shortcode should be structured as follows:

[fi=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]

Please make sure to include the elements in this exact sequence: icon name, size, color (in HEX format), class, aria-hidden, and stroke-width. The color should be specified using HEX format. This format is necessary for the plugin to correctly interpret and display the icons as intended.

Examples:

<!-- Default Usage -->
[fi=bell]

<!-- Example with Size and Color -->
[fi=bell size=30px color=#ff0000]

<!-- Example with Size and Stroke Width -->
[fi=bell size=4rem stroke-width=3]

<!-- Example with Full Customization -->
[fi=bell size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]

Full List of Feather Icons

Below you can find a comprehensive list of all available Feather Icons. This list is designed to make finding and selecting the perfect icon for your needs easier. Browse through the list, and when you find an icon you wish to use, click on it. Upon clicking, the shortcode for that specific icon will be automatically copied to your clipboard in the format [fi=icon-name].

Conclusion

The Feather Icons Plugin is a powerful and easy-to-use tool for adding and customizing icons on your Publii site. With its wide range of settings and customization options, you can easily enhance the visual appeal of your website while maintaining accessibility standards.