Sublime Text snippets for several popular icon fonts (see details).
This package is also available for Atom and Visual Studio Code.
Screenshot using the Hopscotch color scheme
- Make sure you already have Package Control installed
- Choose “Install Package” from the Command Palette (Super+Shift+P)
- Select “Icon Fonts” and press Enter
- Change to your Sublime Text
Packages
directory - Clone repository
git clone https://github.com/idleberg/sublime-icon-fonts "Icon Fonts"
Snippets are limited to the html
and css|less|sass|scss|stylus
scopes, which might not be activated in your auto_complete_selector
user preferences by default. However, you can still force the completion popup to show by pressing Ctrl+Space.
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 |
ion |
Ionicons | 2.0.1 |
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
Snippets also work in the text.css
scope, where they complete to the Unicode value of an icon.
Example:
fa-check
+Tab completes to'\f00c'
These snippets also work for Less, SCSS and Stylus files!
This work is licensed under the The MIT License.