Get Bricksfusion BLACKFRIDAY DealUntil month-end

Documentation

v1.5.1

Glow icon

PREVIEW

What is it?

Glow icon adds a dynamic, neon-like glow to icons or text elements on a webpage, creating a futuristic and visually striking appearance. It leverages customizable configurations for colors, intensity, and animations, enabling seamless integration into different design themes.

How to set it up?

To set up the Glow icon element, configure the following attributes on the icon element:

'data-neon="true'. Enables the Glow Icon effect on the element. This attribute is required for the effect to be applied. Remember that you must set the attribute value to ‘true’ (without the quotes) to activate it.

'data-neon-color'. Specifies a predefined neon color preset for the icon's primary and glow effect. Available presets include:

  • blue (default)
  • red
  • green
  • purple
  • white
  • gold
  • cyan

'data-neon-custom-color' (Optional). Overrides the predefined neon color presets by providing a custom primary color (in hex format). Example: data-neon-custom-color="#ff5733"

'data-neon-intensity' (Optional). Adjusts the intensity of the glow and stroke effect. Available options are:

  • low: Subtle glow with thin strokes.
  • medium: Balanced glow and stroke (default).
  • high: Strong glow with thicker strokes.

'data-neon-flicker' (Optional). Adds a flickering animation to simulate a retro neon light. Example: data-neon-flicker="true"