https://github.com/cityssm/fa-glow

The missing option to outline layered icons when using Font Awesome SVG+JS
https://github.com/cityssm/fa-glow

css font-awesome font-awesome-5 svg

Last synced: about 1 month ago
JSON representation

The missing option to outline layered icons when using Font Awesome SVG+JS

• Host: GitHub
• URL: https://github.com/cityssm/fa-glow
• Owner: cityssm
• License: mit
• Created: 2022-03-29T14:28:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-16T19:29:18.000Z (over 2 years ago)
• Last Synced: 2024-08-09T15:52:38.453Z (5 months ago)
• Topics: css, font-awesome, font-awesome-5, svg
• Language: HTML
• Homepage: https://cityssm.github.io/fa-glow/
• Size: 14.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fa-glow

[![npm (scoped)](https://img.shields.io/npm/v/@cityssm/fa-glow)](https://www.npmjs.com/package/@cityssm/fa-glow)

[![Codacy grade](https://img.shields.io/codacy/grade/57fa7ebdbec4464192459e94cea7dd07)](https://app.codacy.com/gh/cityssm/fa-glow/dashboard?branch=main)

The missing option to outline layered icons when using

[Font Awesome](https://fontawesome.com/) SVG+JS.

![fa-glow sample](sample.png)

## Usage

This small CSS file works with the SVG+JS version of Font Awesome,

and was tested with version 5.  It may work with version 6, though has not been tested.

```html

  

  

    

    

  

  

```

## Options

Attributes are added to the icon elements.

`data-fa-glow`

-   Adds an outline to the icon using the default width (8).

`data-fa-glow="5"`

-   Adds an outline to the icon with 10 times the width set.

-   Whole numbers between 1 and 10 are accepted.

`style="--fa-glow-color:red"`

-   Sets the color of the outline.

-   When unset, the default color (white) will be used.

## Need `fa-glow` with the CSS version of Font Awesome?

[fa5-power-transforms-css](https://github.com/cityssm/fa5-power-transforms-css)

offers a lot of Font Awesome's Power Transform functionality,

including limited support for the `data-fa-glow` attribute.