Font Awesome Auto-complete & Preview
Auto-complete & preview Font Awesome 6, 5, or 4 icons in any language (see configuration).
Installation
Default usage
Type "fa-" (without quotes) to start auto-completing icons. If the icon preview is not showing up (as shown in the GIFs below), press Ctrl+Space (default hotkey) or press the 
"Read More..." button to expand the details view.
Additional features
Mouse-over documentation
Configuration
The following options can be set in the settings to configure the behavior of the extension:
{
// Font Awesome version to use.
"fontAwesomeAutocomplete.version": "5",
// List of glob patterns that determine where Font Awesome 5 Autocomplete will provide suggestions.
"fontAwesomeAutocomplete.patterns": [
"**/*.html"
],
// A word that triggers the autocompletion of Font Awesome icons. Last character of the trigger word is also the trigger character for autocompletion menu.
"fontAwesomeAutocomplete.triggerWord": "fa-",
// A list of glob patterns for which the extension should NOT auto-remove the trigger word when a font class name is inserted from the autocompletion list.
"fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": ["**/*.html"],
// Background color of a Font Awesome icon preview. Supports any valid CSS color.
"fontAwesomeAutocomplete.preview.backgroundColor": "#ffffff",
// Foreground color of a Font Awesome icon preview. Supports any valid CSS color.
"fontAwesomeAutocomplete.preview.foregroundColor": "#000000",
// Allows overriding the inserted text per file type when an autocompletion item is selected.
// Available template placeholders are {style}, {styleName}, {name}, and {prefix}.
// {name} supports the following formatters: camelCase, kebabCase, pascalCase, and snakeCase. Usage: {name:formatter}, e.g. {name:camelCase}
"fontAwesomeAutocomplete.insertionTemplate": {
"**/*.html": "{style} {prefix}{name}"
}
// Artificially increases the importance of completion items. Enabled by default as FontAwesome Autocomplete extension only provides suggestions based on the triggerWord setting.
"fontAwesomeAutocomplete.enableElevatedSortPriority": true
}
The extension listens for changes in the settings and auto-reloads itself when necessary.
Troubleshooting / FAQ
I'm not using standard CSS class name icon references
See Insertion templates for 3rd party libraries.
Autocompletion suggestions are not appearing
See the configuration reference.
Font Awesome icons only appear in the autocompletion item list if the current word starts with the value of the setting fontAwesomeAutocomplete.triggerWord, e.g. "fa-" (default).
- The last character of the trigger word (e.g.
-, which is the default) also works as the trigger character for the autocompletion menu.
Try adding the current file extension as a glob pattern (e.g. "**/*.html") to the fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns setting. If that doesn't help, please open an issue!
Mouse-over documentation does not work with a custom insertion template
If a custom insertion template is configured and the mouse-over documentation does not work, please open an issue. Make sure to provide the custom insertion template for reference and issue reproduction.
Autocompletion suggestions of this extension appear at the end of the list
This is usually caused by another extension having higher priority, especially if the other extension provides snippets.
- Make sure the setting
fontAwesomeAutocomplete.enableElevatedSortPriority is set to true (default)
- Set the setting
editor.snippetSuggestions to "bottom"
If you're still having trouble with the sort order of the autocompletion items, please open issue.
Insertion templates for 3rd party libraries
Changelog
See CHANGELOG.md
License
See LICENCE.md
