Icon Fonts for Visual Studio Code

Note: As of v1.9, this package supports all Font Awesome v5 icons. If you need to continue the old Font Awesome v4 icons, please install the icon-fonts-legacy package via Extension Marketplace!

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

Installation

Extension Marketplace

Launch Quick Open, paste the following command, and press Enter

ext install icon-fonts

Packaged Extension

Download the package extension from the the release page and install it from the command-line:

$ code --install-extension icon-font-*.vsix

Clone Repository

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

Usage

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>).

Prefixes

Prefix	Icon Font	Version	cdnjs	jsDelivr
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.5.0	✅	✅
fi	Foundation Icons	3.0	✅	✅
fl	Font Logos	0.11	🚫	🚫
geomicon	Geomicons Open	2.0.0	🚫	✅
glyphicon	Bootstrap Glyphicons	3.3.7	🚫	🚫
icono	Icono	1.3.0	✅	🚫
ion	Ionicons	2.0.1	🚫	🚫
mdi	Material Design Icons	2.6.95	✅	🚫
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.5.0	✅	✅
pf	PaymentFont	1.2.5	✅	🚫
ratchicon	Ratchicons	2.0.2	✅	✅
st	Stack Icons	1.0.0	🚫	🚫
typcn	Typicons	2.0.7	🚫	🚫
wi	Weather Icons	2.0.10	✅	🚫
zmdi	Material Design Iconic Font	2.2.0	✅	🚫

Several previously supported fonts have been removed and are now available in the SVG icons package or the icon fonts legacy package.

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

CDNs

If a supported CDN is indicated in the table above, you can use the prefixes cdnjs or jsdelivr to quickly insert a link to the CDN-hosted asset:

Examples:

• cdnjs-fa+Tab completes to a <link> tag to the Font Awesome style-sheet
• jsdelivr-fa+Tab completes to a <link> tag to the Font Awesome style-sheet
• jsdelivr-geomicon+Tab completes to a <script> tag to the Geomicons script

License

This work is licensed under The MIT License

Donate

You are welcome to support this project using Flattr or Bitcoin 17CXJuPsmhuTzFV2k4RKYwpEHVjskJktRd