{"id":25596682,"url":"https://github.com/robbield/fontawesomeiconfinder","last_synced_at":"2026-03-05T07:35:49.322Z","repository":{"id":47379213,"uuid":"156838517","full_name":"RobbieLD/FontAwesomeIconFinder","owner":"RobbieLD","description":"An umbraco property editor which integrates Font Awesome icons, and is user upgradable to user the latest icons","archived":false,"fork":false,"pushed_at":"2023-08-30T11:41:10.000Z","size":690,"stargazers_count":0,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-24T22:27:48.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://faif.robdavis.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RobbieLD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-09T09:19:11.000Z","updated_at":"2022-11-17T04:23:09.000Z","dependencies_parsed_at":"2025-03-18T13:01:53.895Z","dependency_job_id":"8eb33d47-3647-4a46-9ab2-d5f1925ff2c6","html_url":"https://github.com/RobbieLD/FontAwesomeIconFinder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RobbieLD/FontAwesomeIconFinder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobbieLD%2FFontAwesomeIconFinder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobbieLD%2FFontAwesomeIconFinder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobbieLD%2FFontAwesomeIconFinder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobbieLD%2FFontAwesomeIconFinder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobbieLD","download_url":"https://codeload.github.com/RobbieLD/FontAwesomeIconFinder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobbieLD%2FFontAwesomeIconFinder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273962579,"owners_count":25198602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-21T12:25:59.904Z","updated_at":"2026-03-05T07:35:49.282Z","avatar_url":"https://github.com/RobbieLD.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Font Awesome Icon Finder\nFont 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.\n![Screen Shot](https://raw.githubusercontent.com/RobbieLD/FontAwesomeIconFinder/master/docs/screen_shot.PNG)\n\n## Demo\nFor a live demo have a look [here](https://faif.robdavis.dev).\n\n## Usage\nUsing 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 `\u003ci\u003e`) to make it dispay the selected icon. Clicking on an icon in the result view changes the selected icon.\n\n## Upgrading\nTo 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. \n1. Download the icon pack from [Font Awesome](https://fontawesome.com/) for the web and extract the files. \n2. Replace the [icons.json](src/icons.json) in this plugin (wich will be stored in \\App_Plugins\\FontAwesomeIconFinder\\) with the icons.json from the Font Awesome download.\n\n![json file](https://raw.githubusercontent.com/RobbieLD/FontAwesomeIconFinder/master/docs/install.PNG)\n\n## Compilation\nTo get the required node modules for the compilationsimply run ```npm install```\nIf you'd like to modify the source in the src directory you simply need to run the following command to build code\n```npm run build```\nThis will compile the code out to the dist directory. The compilation uses babel to transform the code into a ES2015.\n\nYou don't need to bother with compilation if you're only looking to support modern browsers which understand the ES2016 syntax.\n\n## Supported Browsers\nThis has been tested on Chrome, Fire Fox, Edge and Internet Explorer 11.\n\n## Trouble shooting\nThere are a couple of JavaScript methods in the code which are useful should you encounter an issue. The [fontawesomeiconfinder.manager.js](src/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. \n```javascript\n  function dumpTrie() {\n        console.log(JSON.stringify(this.trie.root, this.trie.replacer));\n  }\n```\n\nThere is also a line in [fontawesomeiconfinder.trie.js](src/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. \n```javascript\n    function _nodeFindLeaves(func, foundKey) {\n\n        if (this.icons.length \u003e 0) {\n            // this is a valid path even if it doesn't end in a leaf\n            func(this);\n\n            // This is a debugging line. It will impact performance heavily. Dont use in production\n            //this.printPath();\n        }\n\n        if (this.children) {\n            for (var index in this.children) {\n                if ((foundKey \u0026\u0026 index !== foundKey) || !foundKey) {\n                    this.children[index].findLeaves(func);\n                }\n            }\n        }\n    }\n```\n\nFinally 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. \n```javascript\n    function setup(selectedCallback) {\n        loader.load('/App_Plugins/FontAwesomeIconFinder/icons.json')\n            .then((response) =\u003e {\n                _loadIcons(response, selectedCallback, this.container, this.trie);\n            }).catch((error) =\u003e {\n                console.error(error);\n            });\n    }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobbield%2Ffontawesomeiconfinder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobbield%2Ffontawesomeiconfinder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobbield%2Ffontawesomeiconfinder/lists"}