如何在FontAwesome Iconpicker中仅显示fa类图标(排除fab/far/fas等)?
Hey there! The problem with your current code is that you’re only adjusting how the selected icon’s class is formatted—you aren’t actually filtering which icons appear in the picker itself. That’s why you’re still seeing all the fab/far/fas icons. Let’s fix this properly:
Option 1: Manually Define Your fa Icons (Great for Exact Control)
If you only need specific fa icons, build a custom array of just those icons and pass it to the icons option:
// List only the fa icons you want to show const faOnlyIcons = [ { title: 'camera', searchTerms: 'photo picture snap' }, { title: 'cog', searchTerms: 'settings gear config' }, { title: 'envelope', searchTerms: 'email message contact' }, // Add any other fa icons you need here ]; // Initialize the picker with your filtered list $('#your-iconpicker-target').fontIconpicker({ icons: faOnlyIcons, fullClassFormatter: function(val) { // Ensure the output class uses the fa prefix return `fa ${val}`; } });
Option 2: Filter the Default Icon List (Faster for All Fa Icons)
If you want to include every native fa icon without listing them all, filter the plugin’s default icon set. Most versions of this picker tag icons with a categories property that tells you their prefix type—we’ll use that to keep only fa icons:
// Grab the default icon list and filter out everything except fa icons const filteredFaIcons = $.fn.fontIconpicker.defaults.icons.filter(icon => { // Check if the icon belongs to the fa category return icon.categories?.includes('fa'); }); // Initialize with the filtered list $('#your-iconpicker-target').fontIconpicker({ icons: filteredFaIcons, fullClassFormatter: function(val) { return `fa ${val}`; } });
Quick Important Note
Don’t leave icons: [] empty! The plugin docs say an empty array will load all default icons automatically—that’s why your original setup didn’t work. The fullClassFormatter only changes the output class, not which icons are displayed. You need both the filtered icon list and the formatter to get what you want.
内容的提问来源于stack exchange,提问作者Diego Felipe

