PHPackages buckleshusky/fontawesomeiconpicker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. buckleshusky/fontawesomeiconpicker ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility) buckleshusky/fontawesomeiconpicker ================================== Adds a Font Awesome 6.x icon picker for SilverStripe. 4.0.0(9mo ago)712.4k5[5 PRs](https://github.com/DoggersHusky/silverstripe-fa-picker/pulls)4BSD-3-ClauseJavaScript Since Feb 8Pushed 9mo ago1 watchersCompare [ Source](https://github.com/DoggersHusky/silverstripe-fa-picker)[ Packagist](https://packagist.org/packages/buckleshusky/fontawesomeiconpicker)[ RSS](/packages/buckleshusky-fontawesomeiconpicker/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (4)Dependencies (2)Versions (25)Used By (4) Font Awesome Icon Picker ======================== [](#font-awesome-icon-picker) Adds a Font Awesome 6.x icon picker to SilverStripe 4. This uses the CDN for Fontawesome 6.2.0. This will work with Fontawesome 6.2.0 pro out-of-the-box (but you will need to have a copy of the kit). ### With the Free version of Font Awesome [](#with-the-free-version-of-font-awesome) Starts out slim: [![Overview of Image Cropper Field](screenshots/screenshot1.PNG)](screenshots/screenshot1.PNG)Expands to allow you to seach for your desired icon: [![Overview of Image Cropper Field](screenshots/screenshot2.PNG)](screenshots/screenshot2.PNG)A list of your recently toggled icons: [![Overview of Image Cropper Field](screenshots/screenshot3.PNG)](screenshots/screenshot3.PNG) ### With the Pro version of Font Awesome [](#with-the-pro-version-of-font-awesome) Everything that you can do in the free version, you can do in the pro version. The pro version however comes with more options. When enabled, Light and Duotone icon styles are unlocked: [![Overview of Image Cropper Field](screenshots/screenshot4-pro.PNG)](screenshots/screenshot4-pro.PNG) Sharp icons, by default, are enabled when you switch to pro: [![Overview of Image Cropper Field](screenshots/screenshot5-pro.PNG)](screenshots/screenshot5-pro.PNG) Requirements ------------ [](#requirements) - SilverStripe 4.x or 5.x Installation ------------ [](#installation) Installation is supported via composer only ``` composer require buckleshusky/fontawesomeiconpicker ``` - Run `dev/build?flush=all` to regenerate the manifest Usage ----- [](#usage) Simply add the field to a DataObject or Page like you normally would. This will save the Font Awesome Icon's class info to a dbfield for use on the front end. ``` use BucklesHusky\FontAwesomeIconPicker\Forms\FAPickerField; use SilverStripe\ORM\DataObject; class TestDataObject extends DataObject { private static $table_name = "TestDataObject"; private static $db = [ 'FAIcon' => 'Varchar(255)', ]; public function getCMSFields() { $fields = parent::getCMSFields(); $fields->addFieldToTab( 'Root.Main', FAPickerField::create('FAIcon', 'Font Awesome Icon\'s Name') ); return $fields; } } ``` If needed, you can add the following to your `PageController` or any page controller that extends `PageController`. This can be added to the `init()` method like below: ``` protected function init() { parent::init(); // get the requirements to render fontawesome icons $this->fontAwesome(); } ``` ### Notes [](#notes) The field has not been tested for use on the frontend of a site. ### Settings [](#settings) **Enable Font Awesome Pro**To enable Font Awesome Pro, add this to your yml file. Replace `all.min.css` and `sharp-solid.min.css` with the Font Awesome Pro css name. These files should be located in your theme's css folder. ``` # settings for FontawesomeIcons FontawesomeIcons: # unlocks pro mode - onkly use this if you are using Font Awesome pro unlock_pro_mode: true # the location of the icon-families.yml from fontawesome icon_yml_location: 'app/fontawesome/icon-families.yml' #the pro css for fonts pro_css: 'all.min.css' # only use one of the following to get your sharp css pro_sharp_css: 'webfonts/fontawesome/css/sharp-solid.min.css' # not needed if sharp is disabled # the folder where all the sharp-*.css are located pro_sharp_css_folder: 'webfonts/fontawesome/css/' # not needed if sharp is disabled # disable generating icons on dev build disable_generate_on_build: false # this is false by default ``` **Options:** OptionDescriptionValuesdefaultfree\_css\_cdn\_versionfor the FREE version. This is the version to get from the fontawesome CDN. This can be used to get the new version. You will still need a copy of icon-families.yml.the version to get from the CDN6.2.0unlock\_pro\_modeenable this to switch to PRO versiontrue/falsefalsedisable\_sharp\_iconswith this enabled, the sharp icons will not be loaded. pro\_sharp\_css will also not be required.true/falsefalsepro\_cssthe name of the PRO version css filestringpro\_sharp\_cssthe name of the PRO version sharp css file. This should be a combined css file containing the sharp-solid, sharp-regular, sharp-light. Example: ``stringpro\_sharp\_css\_folderthe name of the folder that contains the css files that start with sharp-. Using this, it will scan through the folder and load all css files that start with sharp-. Example: ``stringicon\_yml\_locationThis is the location of the icon-families.yml file in your theme.stringdisable\_generate\_on\_buildThis will disable generating icons on dev/build. If you don't feel you'll update your icons, you can set this to disabledtrue/falsefalse**How to setup the PRO version of fontawesome?** - You will need to download a kit from the [fontawesome site](https://fontawesome.com/sessions/sign-in?next=%2F). - Grab the css file for `all.min.css` and `sharp-[x].min.css` (where x is the different variants of sharp) and place it in your theme's css folder. - Grab the `webfonts` folder and place it in your theme's folder. Example `themes\simple`. - update your config: ``` FontawesomeIcons: unlock_pro_mode: true # the location of the icon-families.yml from fontawesome icon_yml_location: 'app/fontawesome/icon-families.yml' # the css of all and sharp-solid pro_css: 'webfonts/fontawesome/css/all.min.css' # not needed if sharp is disabled pro_sharp_css_folder: 'webfonts/fontawesome/css/' ``` - place the `icon-families.yml` yml file into your site's app folder. In this example, it would be placed in `app/fontawesome/icon-families.yml`. - do a `dev/build`, or, if you have it disabled, run the following tasks `dev/tasks/generate-font-awesome` **How do I use a newer version of Fontawesome?** - Get a copy of `icon-families.yml`. - You can obtain this from their [github](https://github.com/FortAwesome/Font-Awesome/blob/6.x/metadata/icon-families.yml). - for **pro**, you will get this file when you download pro from fontawesome - Place this file into your site's app folder. - Updated `icon_yml_location` to point to the yml's folder i.e. `app/fontawesome/icon-families.yml` - For the **FREE version** you can optionally do the following: - add the following to your yml with the desired version you would like from the CDN: ``` FontawesomeIcons: free_css_cdn_version: '6.3.0' ``` - For the **PRO version**: - follow the steps above for **How to setup the PRO version of fontawesome?** ### What's New [](#whats-new) - switched to use **FontawesomeIconsListCustom** yml config to prevent duplicate icons - clicking sharp now allows you to select type - when you click a family, the type buttons are filtered down to only show you what's available - added support for display logic - added support for all sharp icons not just sharp solid - pagination no longer remembers the page when choose a family/type - when you expand the field, it will get the family and switch to the proper tab - updated documentation ### Future [](#future) - add back in removing icons - removed for now to clean this up and get it released - add documentation for adding your own icons - dynamic generating of style types ### Health Score 46 — FairBetter than 93% of packages Maintenance55 Moderate activity, may be stable Popularity31 Limited adoption so far Community20 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 96.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~110 days Recently: every ~165 days Total 19 Last Release 299d ago Major Versions 1.1.1 → 2.0.02021-03-16 2.1.1 → 3.0.02022-10-25 3.2.0 → 4.0.02025-07-17 ### Community Maintainers ![](https://www.gravatar.com/avatar/10f87b507a938238a1e35b05a08b68c01a81a896b5c615fbe770a68cb4fd2b95?d=identicon)[doggershusky](/maintainers/doggershusky) --- Top Contributors [![DoggersHusky](https://avatars.githubusercontent.com/u/8750719?v=4)](https://github.com/DoggersHusky "DoggersHusky (247 commits)")[![Oliver996](https://avatars.githubusercontent.com/u/783116?v=4)](https://github.com/Oliver996 "Oliver996 (6 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![mooror](https://avatars.githubusercontent.com/u/6110819?v=4)](https://github.com/mooror "mooror (1 commits)") --- Tags silverstripeiconspickerfont-awesomeFontAwesome ### Embed Badge ![Health badge](/badges/buckleshusky-fontawesomeiconpicker/health.svg) ``` [![Health](https://phpackages.com/badges/buckleshusky-fontawesomeiconpicker/health.svg)](https://phpackages.com/packages/buckleshusky-fontawesomeiconpicker) ``` ### Alternatives [swissup/module-font-awesome FontAwesome for Magento2 116.9k1](/packages/swissup-module-font-awesome)[kinglozzer/multiselectfield A sortable multiple select field for managing many-to-many relations 1341.2k2](/packages/kinglozzer-multiselectfield)[thisisbd/silverstripe-fontawesome-iconpickerfield Font Awesome Icon Picker for SilverStripe 3.1.x based on http://mjolnic.com/fontawesome-iconpicker 143.3k1](/packages/thisisbd-silverstripe-fontawesome-iconpickerfield)[wedevelopnl/silverstripe-elemental-grid Elemental grid module 1014.1k2](/packages/wedevelopnl-silverstripe-elemental-grid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)