Skip to content

Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!

License

Notifications You must be signed in to change notification settings

idleberg/vscode-icon-fonts

Repository files navigation

Icon Fonts for Visual Studio Code

Version Visual Studio Marketplace Installs Open VSX Downloads Build

Snippets for a variety of icon fonts (see details).

This package is also available for Atom and Sublime Text.

Screenshot

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 idleberg.icon-fonts

CLI

With shell commands installed, you can use the following command to install the extension:

$ code --install-extension idleberg.icon-fonts

Packaged Extension

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

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

⚠️ 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

License

This work is licensed under The MIT License