GitHub - jhob/vim-devicons: :symbols: adds font icons (glyphs ★♨☢) to programming languages, libraries, and web developer filetypes for: NERDTree, powerline, vim-airline, ctrlp, unite, lightline.vim, vim-startify, vimfiler, and flagship

Screenshots	API	Fonts ➶	Patcher ➶

Adds filetype glyphs (icons) to other plugins such as NERDTree, vim-airline, CtrlP, powerline, unite, lightline.vim, vim-startify, vimfiler, and flagship.

Quick Setup (TL;DR)

Download and install a patched nerd-font (or patch your own) (» More details... «)
Install the plugin per your usual method (» More details... «)
Set font (» More details... «)

a. vim: Set your terminal emulator font
b. gvim: Set guifont in your vimrc

Installation

This plugin follows the standard runtime path structure, and as such it can be installed with a variety of plugin managers:

Step 1

Pathogen

git clone https://github.com/ryanoasis/vim-devicons ~/.vim/bundle/vim-devicons

NeoBundle

Add to vimrc:
```
NeoBundle 'ryanoasis/vim-devicons'
```
And install it:
```
:so~/.vimrc
:NeoBundleInstall
```

Vundle

Add to vimrc:
```
Plugin'ryanoasis/vim-devicons'
```
And install it:
```
:so~/.vimrc
:PluginInstall`
```

Manual

copy all of the files into your ~/.vim directory

Step 2

Add the following to your .vimrc or .gvimrc:

Encoding must be set to UTF-8 for the glyphs to show

setencoding=utf8

For Powerline symbols to show in airline the following needs to be set

letg:airline_powerline_fonts=1

vimrc examples

The ONLY other configuration needed should be setting the font vim uses to a patched font.

Already patched fonts and the font patcher script are provided at: nerd-fonts

It works without configuration ONLY when used with a patched font provided in the separate repository above. Install the font and add it to your vimrc or gvimrc:

Linux

setguifont=<FONT_NAME><FONT_SIZE>

setguifont=Droid\ Sans\ Mono\ for\ Powerline\ Plus\ Nerd\ File\ Types\ 11

OS X and Windows

setguifont=<FONT_NAME>:h<FONT_SIZE>

setguifont=Droid\ Sans\ Mono\ for\ Powerline\ Plus\ Nerd\ File\ Types:h11

Usage

After installing the patched font and setting the vim font just open or look at any of the supported plugins you have installed (NERDTree, airline, powerline, unite, lightline.vim, vimfiler, or flagship).

NOTE: if you don't have guifont set and are not running gvim you will need to set the terminal font.
NOTE: for support of these plugins: NERDTree, vim-airline, CtrlP, powerline, unite, vimfiler, flagship you must configure vim to load those plugins before vim-devicons loads.
NOTE: for better nerdtree-git-plugin support, you should configure vim to load nerdtree-git-plugin before vim-devicons loads.

Screenshots

NERDTree

vim-airline

section	preview
statusline
tabline
tabline
fileformats symbols

CtrlP

Only supports the CtrlP active fork
Currently only MRU file mode supported

| Deprecation warning |

| Support for the Original Kien CtrlP Repo has been dropped since v0.7.0 and only the active CtrlP fork is supported |

powerline

unite

Currently only supports file, file_rec, and buffer

lightline.vim

vim-startify

vimfiler

flagship

NOTE: flagship support is experimental because the API may be changing

nerdtree-git-plugin

with g:WebDevIconsNerdTreeGitPluginForceVAlign on

with g:WebDevIconsNerdTreeGitPluginForceVAlign off

Different patched fonts example

Various Terminal Emulators

gnome terminal

Urxvt terminal

Windows

Mac OS X

Thanks @RageZBla

Glyph set test file

Features

show developer file type glyphs from a font in various vim plugins, currently supports:
- NERDTree
- vim-airline (statusline and tabline)
- lightline.vim (statusline)
  - see: lightline setup
- Powerline (statusline)
  - see: powerline setup
Adds a global config map of characters to file extensions (or entire filenames)
customizable and extendable filetype detections
- ability to override predefined dictionary variable
- if you are unhappy with the default glyph used you can choose your own
supports a range of file type extensions by default:
- styl, scss, htm, html, slim, ejs, css, less, md, json, js, jsx, rb, php, py, pyc, pyd, pyo, coffee, mustache, hbs, conf, ini, yml, bat, jpg, jpeg, bmp, png, gif, twig, cpp, c++, cxx, cc, cp, c, hs, lhs, lua, java, sh, fish, diff, db, clj, cljs, edn, scala, go, dart, xul, sln, suo, pl, pm, t, rss, f#, fsscript, fsx, fs, fsi, rs, rlib, d, erl, hrl, vim, ai, psd, psb, ts, jl
supports full filename matches, by default:
- gruntfile.coffee, gruntfile.js, gruntfile.ls, gulpfile.coffee, gulpfile.js, gulpfile.ls, dropbox, .ds_store, .gitconfig, .gitignore, .bashrc, .bashprofile, favicon.ico, license, node_modules, react.jsx, procfile
supports library pattern matches, by default:
- jquery, angular, backbone, requirejs, materialize, mootools
font patcher (nerd-fonts)
- requires: python2, python-fontforge package
- example usage
  ./font-patcher unpatched-sample-fonts/Droid\ Sans\ Mono\ for\ Powerline.otf

Extra Configuration

by default you should not NEED to configure anything to get the basics working
- NOTE: You NEED to use one of the patched font provided or patch your own (nerd-fonts) unless you want to configure the filetype to glyph mappings yourself for your current font
these options can be defined in your vimrc or gvimrc
the following options are provided however for overriding
enable/disable loading the plugin (default 1)

letg:webdevicons_enable=1

enable/disable adding the flags to NERDTree (default 1)

letg:webdevicons_enable_nerdtree=1

enable/disable adding the custom source to unite (default 1)

letg:webdevicons_enable_unite=1

enable/disable adding the column to vimfiler (default 1)

letg:webdevicons_enable_vimfiler=1

enable/disable adding to vim-airline's tabline (default 1)

letg:webdevicons_enable_airline_tabline=1

enable/disable adding to vim-airline's statusline (default 1)

letg:webdevicons_enable_airline_statusline=1

enable/disable ctrlp MRU file mode glyphs (default 1)

letg:webdevicons_enable_ctrlp=1

enable/disable adding to flagship's statusline (default 1)

letg:webdevicons_enable_flagship_statusline=1

turn on/off file node glyph decorations (not particularly useful)

letg:WebDevIconsUnicodeDecorateFileNodes=1

whether or not font is using double-width glyphs (default 1, set to 0 for single character width glyphs)
- note: does not actually switch the font or try to use the correct font, just adds a space to account for a double width glyph, you have to set the correct double width glyph font in your terminal or guifont

letg:WebDevIconsUnicodeGlyphDoubleWidth=1

whether or not to show the nerdtree brackets around flags (default 1)

letg:webdevicons_conceal_nerdtree_brackets=1

the amount of space to use after the glyph character (default ' ')

letg:WebDevIconsNerdTreeAfterGlyphPadding=''

Force extra padding in NERDTree so that the filetype icons line up vertically (when nerdtree-git-plugin is present) (default 1)

letg:WebDevIconsNerdTreeGitPluginForceVAlign=1

Character Mappings

ƛ is used as an example below, substitute for the glyph you actually want to use
change the default character when no match found

letg:WebDevIconsUnicodeDecorateFileNodesDefaultSymbol='ƛ'

enable folder/directory glyph flag (disabled by default with 0)

letg:WebDevIconsUnicodeDecorateFolderNodes=1

enable open and close folder/directory glyph flags (disabled by default with 0)

letg:DevIconsEnableFoldersOpenClose=1

enable pattern matching glyphs on folder/directory (enabled by default with 1)

letg:DevIconsEnableFolderPatternMatching=1

enable file extension pattern matching glyphs on folder/directory (disabled by default with 0)

letg:DevIconsEnableFolderExtensionPatternMatching=0

enable custom folder/directory glyph exact matching (enabled by default when g:WebDevIconsUnicodeDecorateFolderNodes is set to 1)

let WebDevIconsUnicodeDecorateFolderNodesExactMatches =1

change the default folder/directory glyph/icon

letg:WebDevIconsUnicodeDecorateFolderNodesDefaultSymbol='ƛ'

change the default open folder/directory glyph/icon (default is '')

letg:DevIconsDefaultFolderOpenSymbol='ƛ'

change the default dictionary mappings for file extension matches

letg:WebDevIconsUnicodeDecorateFileNodesExtensionSymbols= {}" neededletg:WebDevIconsUnicodeDecorateFileNodesExtensionSymbols['js'] ='ƛ'

change the default dictionary mappings for exact file node matches

letg:WebDevIconsUnicodeDecorateFileNodesExactSymbols= {}" neededletg:WebDevIconsUnicodeDecorateFileNodesExactSymbols['MyReallyCoolFile.okay'] ='ƛ'

add or override individual additional filetypes

letg:WebDevIconsUnicodeDecorateFileNodesExtensionSymbols= {}" neededletg:WebDevIconsUnicodeDecorateFileNodesExtensionSymbols['myext'] ='ƛ'

specify OS to decide an icon for unix fileformat (not defined by default)
- this is useful for avoiding unnecessary system() call. you might see #135 to know logic further.

letg:WebDevIconsOS='Darwin'

Lightline Setup

To add the appropriate icon to lightline, call the function WebDevIconsGetFileTypeSymbol() and/or WebDevIconsGetFileFormatSymbol() in your .vimrc. For example, you could set your sections to:

letg:lightline= {
\ 'component_function': {
\ 'filetype': 'MyFiletype',
\ 'fileformat': 'MyFileformat',
\ }
\ }
function!MyFiletype()
returnwinwidth(0) > 70 ? (strlen(&filetype) ? &filetype . '' . WebDevIconsGetFileTypeSymbol() : 'no ft') : ''endfunctionfunction!MyFileformat()
returnwinwidth(0) > 70 ? (&fileformat . '' . WebDevIconsGetFileFormatSymbol()) : ''endfunction

Powerline Setup

Note this is for the current Powerline not the deprecated vim-powerline

To enable for Powerline some vimrc and powerline configuration changes are needed:

vimrc changes (only required if you don't already have powerline setup for vim):

setrtp+=$HOME/.local/lib/python2.7/site-packages/powerline/bindings/vim/" Always show statuslinesetlaststatus=2" Use 256 colours (Use this setting only if your terminal supports 256 colours)sett_Co=256

powerline configuration changes:

file type segment

{
"function": "vim_devicons.powerline.segments.webdevicons",
"priority": 10,
"draw_soft_divider": false,
"after": ""
}

file format segment

{
"function": "vim_devicons.powerline.segments.webdevicons_file_format",
"draw_soft_divider": false,
"exclude_modes": ["nc"],
"priority": 90
}

for full example see sample file

API

" returns the font character that represents the icon" parameters: a:1 (filename), a:2 (isDirectory)" both parameters optional" by default without parameters uses buffer nameWebDevIconsGetFileTypeSymbol(...)
" returns the font character that represents" the file format as an icon (windows, linux, mac)WebDevIconsGetFileFormatSymbol()

API Examples

todo

Todo

more filetypes to support
customize filetype icon colors
more customization options in general
more specific FAQ and Troubleshooting help

FAQ / Troubleshooting

I don't want to use any of the fonts provided, I want to use font ABC
try the font patcher: nerd-fonts
see font configuration above for more details
It isn't working
- Are you using the patched font provided in the separate repo (nerd-fonts) or are you patching your own?
- NOTE: if running vim and no font set it will default to the terminal font that is set
- check what the vim/gvim font is set to, from ex mode:
```
:setguifont?
```
- check if the plugin is loaded (should give '1'), from ex mode:
```
:echo loaded_webdevicons
```
- check if the plugin is enabled (should give '1'), from ex mode:
```
:echog:webdevicons_enable
```
- check if the plugin is enabled for NERDTree (should give '1'), from ex mode:
  - this should NOT need to be set under normal circumstances
```
:echog:webdevicons_enable_nerdtree
```
- check if you are able to see the characters, from ex mode:
```
:echog:WebDevIconsUnicodeDecorateFileNodesDefaultSymbol
```
- if all this looks correct you may try this to see if any files show flags
  - last resort, see if you can even set the default symbol and have it display anywhere (NERDTree, vim-airline's statusline, vim-airlines's tabline), from ex mode:
```
:letg:WebDevIconsUnicodeDecorateFileNodesDefaultSymbol='x'
```

How did you get color matching based on file type in nerdtree?

my current settings are from: preservim/nerdtree#201 (comment)

" NERDTress File highlightingfunction!NERDTreeHighlightFile(extension, fg, bg, guifg, guibg)
exec'autocmd FileType nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifgexec'autocmd FileType nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#'endfunctioncallNERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515')
callNERDTreeHighlightFile('ini', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('md', 'blue', 'none', '#3366FF', '#151515')
callNERDTreeHighlightFile('yml', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('config', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('conf', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('json', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('html', 'yellow', 'none', 'yellow', '#151515')
callNERDTreeHighlightFile('styl', 'cyan', 'none', 'cyan', '#151515')
callNERDTreeHighlightFile('css', 'cyan', 'none', 'cyan', '#151515')
callNERDTreeHighlightFile('coffee', 'Red', 'none', 'red', '#151515')
callNERDTreeHighlightFile('js', 'Red', 'none', '#ffa500', '#151515')
callNERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515')
callNERDTreeHighlightFile('ds_store', 'Gray', 'none', '#686868', '#151515')
callNERDTreeHighlightFile('gitconfig', 'Gray', 'none', '#686868', '#151515')
callNERDTreeHighlightFile('gitignore', 'Gray', 'none', '#686868', '#151515')
callNERDTreeHighlightFile('bashrc', 'Gray', 'none', '#686868', '#151515')
callNERDTreeHighlightFile('bashprofile', 'Gray', 'none', '#686868', '#151515')

Note: If the colors still are not highlighting, try invoking such as:

autocmd VimEnter * call NERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515')

per: ryanoasis#49 (comment)

How did you get color matching on just the glyph/icon in nerdtree?

" NERDTress File highlighting only the glyph/icon" test highlight just the glyph (icons) in nerdtree:autocmdfiletypenerdtreehighlight haskell_icon ctermbg=none ctermfg=Red guifg=#ffa500
autocmdfiletypenerdtreehighlight html_icon ctermbg=none ctermfg=Red guifg=#ffa500
autocmdfiletypenerdtreehighlight go_icon ctermbg=none ctermfg=Red guifg=#ffa500
autocmdfiletypenerdtreesynmatch haskell_icon ## containedin=NERDTreeFile
" if you are using another syn highlight for a given line (e.g." NERDTreeHighlightFile) need to give that name in the 'containedin' for this" other highlight to work with itautocmdfiletypenerdtreesynmatch html_icon ## containedin=NERDTreeFile,html
autocmdfiletypenerdtreesynmatch go_icon ## containedin=NERDTreeFile

Issues after re-sourcing vimrc
- Try adding this to the bottom of your vimrc
```
ifexists("g:loaded_webdevicons")
callwebdevicons#refresh()
endif
```
Artifacts after or instead of glyphs
- Dots after icons in NERDTree (on GVim), try:
```
autocmdFileTypenerdtreesetlocalnolist
```
per: ryanoasis#110 (comment)

Contributing

Best ways to contribute

Star it on GitHub - if you use it and like it please at least star it :)
Promote
Open issues/tickets
Submit fixes and/or improvements with Pull Requests

Promotion

Like the project? Please support to ensure continued development going forward:

Star this repo on GitHub
Follow the repo on GitHub
Vote for it on vim.org
Follow me
- Twitter
- GitHub

Source code

Contributions and pull requests are welcome.

No real formal process has been setup - just stick to general good conventions for now.

Rationale

After seeing the awesome theme for Atom (seti-ui) and the awesome plugins work done for NERDTree and vim-airline and wanting something like this for Vim I decided to create my first plugin.

Name		Name	Last commit message	Last commit date
.github		.github
autoload		autoload
doc		doc
nerdtree_plugin		nerdtree_plugin
plugin		plugin
pythonx/vim_devicons		pythonx/vim_devicons
LICENSE		LICENSE
changelog.md		changelog.md
code_of_conduct.md		code_of_conduct.md
contributing.md		contributing.md
readme.md		readme.md

Latest commit

History

Folders and files

Repository files navigation

Table of Contents

Quick Setup (TL;DR)

Installation

Step 1

Manual

Step 2

Encoding must be set to UTF-8 for the glyphs to show

For Powerline symbols to show in airline the following needs to be set

vimrc examples

Usage

Screenshots

| Deprecation warning |

Different patched fonts example

Various Terminal Emulators

Windows

Mac OS X

Glyph set test file

Features

Extra Configuration

Character Mappings

Lightline Setup

Powerline Setup

API

API Examples

Todo

FAQ / Troubleshooting

Contributing

Promotion

Source code

Rationale

Inspiration and special thanks

Also thanks to the many contributors:

License

About

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages