Snippets for a variety of icon fonts (see details).
This package is also available for Atom and Sublime Text.
Screenshot nicked from the Sublime Text package, but you get the idea
Launch Quick Open, paste the following command, and press Enter
ext install idleberg.icon-fonts
With shell commands installed, you can use the following command to install the extension:
$ code --install-extension idleberg.icon-fonts
Download the packaged extension from the the release page and install it from the command-line:
$ code --install-extension path/to/icon-fonts-*.vsix
Alternatively, you can download the packaged extension from the Open VSX Registry or install it using the ovsx
command-line tool:
$ ovsx get idleberg.icon-fonts
Change to your Visual Studio Code extensions directory:
# Windows
$ cd %USERPROFILE%\.vscode\extensions
# Linux & macOS
$ cd ~/.vscode/extensions/
Clone repository as icon-fonts
:
$ git clone https://github.com/idleberg/vscode-icon-fonts icon-fonts
Snippets are limited to the html
, css|less|sass|scss|stylus
, jsx
, blade
and vue
scopes. Typing the class name of an icon using the designated prefix will complete to a tag containing the icon class. Exceptions are fa-layers
, fa-layers-counter
, fa-layers-text
and fa-layers
(<span>
).
Prefix | Icon Font | Version |
---|---|---|
ai |
Android Icons | 1.0.0 |
cc |
Creative Commons Icon Font | 1.2.1 |
bx |
BoxIcons | - |
dashicons |
WordPress Dashicons | – |
devicons |
Devicons | 1.8.0 |
el |
Elusive Icons | 2.0.0 |
fas ,far ,fab |
Font Awesome Pro | 5.15.4 |
fl |
Font Logos | 0.18 |
glyphicon |
Bootstrap Glyphicons | 3.3.7 |
icono |
Icono | 1.3.0 |
mdi |
Material Design Icons | 6.7.96 |
mfg |
MFG Labs Iconset | – |
mfizz |
Font Mfizz | 2.4.1 |
mio |
Material Design Icons (Official) | 3.0.1 |
octicon |
GitHub Octicons | 4.1.0 |
oi |
Open Iconic | 1.1.0 |
openwebicons |
OpenWeb Icons | 1.6.3 |
pf |
PaymentFont | 1.2.5 |
ri |
RemixIcon | 2.5.0 |
st |
Stack Icons | 1.0.0 |
typcn |
Typicons | 2.1.2 |
wi |
Weather Icons | 2.0.12 |
zmdi |
Material Design Iconic Font | 2.2.0 |
Examples:
fa-check
+Tab completes to<i class="fa fa-check"></i>
glyphicon-check
+Tab completes to<span class="glyphicon glyphicons-check"></span>
- well, you get the idea
This work is licensed under The MIT License