Icon Fonts for Sublime Text

Sublime Text snippets for several popular icon fonts (see details)

Screenshot using the Hopscotch color scheme

Installation

Package Control

1. Make sure you already have Package Control installed
2. Choose “Install Package” from the Command Palette (Super+Shift+P)
3. Select “Icon Fonts” and press Enter

GitHub

1. Change to your Sublime Text Packages directory
2. Clone repository git clone https://github.com/idleberg/Icon-Fonts-Sublime-Text

Usage

Snippets are limited to the text.html scope, 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 will complete to a tag containing the icon's class — exceptions are fa-stack (completes to <span>) and fa-ul (completes to <ul>). Press Tab to jump between tag name, classes and the space between tags.

Prefixes

Prefix	Icon Font	Version	cdnjs	jsDelivr
ai	Android Icons	1.0.0	🚫	🚫
brandico	Brandico Font	–	🚫	🚫
cc	Creative Commons Icon Font	1.2.1	✅	✅
devicons	Devicons	1.8.0	✅	✅
el-icon	Elusive Icons	?	🚫	🚫
fa	Font Awesome	4.5.0	✅	✅
fi	Foundation Icons	3.0	✅	✅
filetypes	Glyphicons Filetypes	1.9.0	🚫	🚫
foundico	Foundation Icons	1.0	🚫	🚫
geomicon	Geomicons Open	2.0.0	🚫	✅
glyphicons	Glyphicons Pro*	1.9.0	🚫	🚫
halflings	Glyphicons Halflings	1.9.0	🚫	🚫
ion	Ionicons	2.0.1	🚫	🚫
line	Elegant Theme Line Icons	–	🚫	🚫
mfg	MFG Labs Iconset	–	🚫	🚫
octicon	GitHub Octicons	3.3.0	🚫	🚫
oi	Open Iconic	1.1.0	🚫	✅
openwebicons	OpenWeb Icons	1.3.2	🚫	🚫
pf	PaymentFont	1.1.2	✅	🚫
ratchicon	Ratchicons	2.0.2	✅	✅
social	Glyphicons Social	1.9.0	🚫	🚫
st	Stack Icons	1.0.0	🚫	🚫
typicon	Typicons	2.0.7	🚫	🚫
ui	Semantic UI Icons	2.0.7	✅	✅
zmdi	Material Design Iconic Font	2.2.0	✅	🚫

* Vanilla Glyphicons and Bootstrap Glyphicons use different class-names, the former adding a plural-s to its classes. On completion, a tab-stop is added to support both options. Future versions will deprecate this distinction, since Bootstrap 4 is likely to ship without (glyph)icons.

Examples:

• fa-check+Tab completes to <i class="fa fa-check"></i>
• glyphicons-check+Tab completes to <span class="glyphicons glyphicons-check"></span>
• octicon-check+Tab completes to <span class="octicon octicon-check"></span>
• well, you get the idea

CDNs

If a supported CDN is indicated in the table above, you can use the prefixes cdnjs, jsdelivr, maxcdn 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
• maxcdn-fa+Tab completes to a <link> tag to the Font Awesome style-sheet

License

This work is licensed under the The MIT License.

Donate

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