FontAwesomeIconFinder 1.1.0

An umbraco property editor for Font Awsome Icons which is User Upgradable to keep up todate with the latest Font Awesome Icons.

Install-Package FontAwesomeIconFinder -Version 1.1.0
dotnet add package FontAwesomeIconFinder --version 1.1.0
<PackageReference Include="FontAwesomeIconFinder" Version="1.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add FontAwesomeIconFinder --version 1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Font Awesome Icon Finder

Font Awesome Icon Finder is an umbraco property editor which integrates Font Awesome icons into the Umbraco back office. It provides a searchable icon grid which uses fast and eccicient trie sorting the filter the icons in real time. It is also user upgradable which allows it to use the latest versions of the icons.
Screen Shot

Demo

For a live demo have a look here.

Usage

Using this property editor is quite simple. Simply add it to a document type in umbraco and the try editing the property in the back office. You can type in the search box to refine the icons options or press enter to search from the start again. The value persisted to the umbraco database is a string (which is also displayed in the property editor to the right of the search box) containing the css class which needs to be applied to an element (usually a &lt;i&gt;) to make it dispay the selected icon. Clicking on an icon in the result view changes the selected icon.

Upgrading

To upgrad the icons it's using to the very latest icons from Font Awesome simply do the following. The current version of the font awesome icons is v5.5.0.

  1. Download the icon pack from Font Awesome for the web and extract the files.
  2. Replace the icons.json in this plugin (wich will be stored in \App_Plugins\FontAwesomeIconFinder) with the icons.json from the Font Awesome download.

json file

Compilation

To get the required node modules for the compilationsimply run npm install
If you'd like to modify the source in the src directory you simply need to run the following command to build code
npm run build
This will compile the code out to the dist directory. The compilation uses babel to transform the code into a ES2015.

You don't need to bother with compilation if you're only looking to support modern browsers which understand the ES2016 syntax.

Supported Browsers

This has been tested on Chrome, Fire Fox, Edge and Internet Explorer 11.

Trouble shooting

There are a couple of JavaScript methods in the code which are useful should you encounter an issue. The fontawesomeiconfinder.manager.js contains a public method dumpTrie() which prints a json representation of the search trie the code has consutrcted from the icons.json file.

  function dumpTrie() {
        console.log(JSON.stringify(this.trie.root, this.trie.replacer));
  }

There is also a line in fontawesomeiconfinder.trie.js in the _nodeFindLeaves(func, foundkey) method which when uncommented will print the trie paths as they are searched. This will however impact performance so don't do this in production.

    function _nodeFindLeaves(func, foundKey) {

        if (this.icons.length > 0) {
            // this is a valid path even if it doesn't end in a leaf
            func(this);

            // This is a debugging line. It will impact performance heavily. Dont use in production
            //this.printPath();
        }

        if (this.children) {
            for (var index in this.children) {
                if ((foundKey && index !== foundKey) || !foundKey) {
                    this.children[index].findLeaves(func);
                }
            }
        }
    }

Finally if you want to change the path or name of the icons file (which can be server from anywhere an you're client code has access to (since it's pulled in via a Fetch call) simply change the path listed in fontawesomeiconfinder.manager.js in the setup(selectedCallback) method as shown below.

    function setup(selectedCallback) {
        loader.load('/App_Plugins/FontAwesomeIconFinder/icons.json')
            .then((response) => {
                _loadIcons(response, selectedCallback, this.container, this.trie);
            }).catch((error) => {
                console.error(error);
            });
    }

Font Awesome Icon Finder

Font Awesome Icon Finder is an umbraco property editor which integrates Font Awesome icons into the Umbraco back office. It provides a searchable icon grid which uses fast and eccicient trie sorting the filter the icons in real time. It is also user upgradable which allows it to use the latest versions of the icons.
Screen Shot

Demo

For a live demo have a look here.

Usage

Using this property editor is quite simple. Simply add it to a document type in umbraco and the try editing the property in the back office. You can type in the search box to refine the icons options or press enter to search from the start again. The value persisted to the umbraco database is a string (which is also displayed in the property editor to the right of the search box) containing the css class which needs to be applied to an element (usually a &lt;i&gt;) to make it dispay the selected icon. Clicking on an icon in the result view changes the selected icon.

Upgrading

To upgrad the icons it's using to the very latest icons from Font Awesome simply do the following. The current version of the font awesome icons is v5.5.0.

  1. Download the icon pack from Font Awesome for the web and extract the files.
  2. Replace the icons.json in this plugin (wich will be stored in \App_Plugins\FontAwesomeIconFinder) with the icons.json from the Font Awesome download.

json file

Compilation

To get the required node modules for the compilationsimply run npm install
If you'd like to modify the source in the src directory you simply need to run the following command to build code
npm run build
This will compile the code out to the dist directory. The compilation uses babel to transform the code into a ES2015.

You don't need to bother with compilation if you're only looking to support modern browsers which understand the ES2016 syntax.

Supported Browsers

This has been tested on Chrome, Fire Fox, Edge and Internet Explorer 11.

Trouble shooting

There are a couple of JavaScript methods in the code which are useful should you encounter an issue. The fontawesomeiconfinder.manager.js contains a public method dumpTrie() which prints a json representation of the search trie the code has consutrcted from the icons.json file.

  function dumpTrie() {
        console.log(JSON.stringify(this.trie.root, this.trie.replacer));
  }

There is also a line in fontawesomeiconfinder.trie.js in the _nodeFindLeaves(func, foundkey) method which when uncommented will print the trie paths as they are searched. This will however impact performance so don't do this in production.

    function _nodeFindLeaves(func, foundKey) {

        if (this.icons.length > 0) {
            // this is a valid path even if it doesn't end in a leaf
            func(this);

            // This is a debugging line. It will impact performance heavily. Dont use in production
            //this.printPath();
        }

        if (this.children) {
            for (var index in this.children) {
                if ((foundKey && index !== foundKey) || !foundKey) {
                    this.children[index].findLeaves(func);
                }
            }
        }
    }

Finally if you want to change the path or name of the icons file (which can be server from anywhere an you're client code has access to (since it's pulled in via a Fetch call) simply change the path listed in fontawesomeiconfinder.manager.js in the setup(selectedCallback) method as shown below.

    function setup(selectedCallback) {
        loader.load('/App_Plugins/FontAwesomeIconFinder/icons.json')
            .then((response) => {
                _loadIcons(response, selectedCallback, this.container, this.trie);
            }).catch((error) => {
                console.error(error);
            });
    }

Release Notes

This initial release

Dependencies

This package has no dependencies.

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.1.0 1,465 12/9/2018
1.0.2 182 11/21/2018
1.0.1 144 11/21/2018
1.0.0 162 11/16/2018