<span itemprop="name">Elusive-Icons Webfont</span>

Elusive-Icons Webfont

299 Sleek vector icons for bootstrap.

Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects!

It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.

When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on github.

Notice that Elusive Webfont isn’t a WP plugin and there’re already merged in Shoestrap theme.



Integration

You can use the Elusive icons font with bootstrap:

Bootstrap using LESS

Use this method if integrating with Twitter Bootstrap using LESS

  1. Copy the elusive-iconfont directory into your project.
  2. Copy elusive-webfont.less into your bootstrap/less directory.
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "elusive-webfont.less";
  4. Open your project’s elusive-webfont.less and edit the font url to ensure it points to the right place.
    @font-face {
    						font-family: 'Elusive-Icons';
    						src:url('../font/Elusive-Icons.eot');
    						src:url('../font/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
    						url('../font/Elusive-Icons.svg#Elusive-Icons') format('svg'),
    						url('../font/Elusive-Icons.woff') format('woff'),
    						url('../font/Elusive-Icons.ttf') format('truetype');
    						font-weight: normal;
    						font-style: normal;
    					}
  5. Re-compile your LESS if using a static compiler.
  6. You should be good to go!


Bootstrap using CSS

Use this method if integrating with Twitter Bootstrap using CSS.

  1. Customize Twitter Bootstrap here. Make sure to uncheck the default “Icons” under “Base CSS.”
  2. Copy the Elusive Icons font directory into your project.
  3. Copy elusive-webfont.css into your project.
  4. Open your project’s elusive-webfont.css and edit the font url to ensure it points to the right place (see above example).
  5. In the <head> of your html, reference the location to your elusive-webfont.css.
    <link rel="stylesheet" href="../css/bootstrap.css">
    						<link rel="stylesheet" href="../css/elusive-webfont.css">


Not using Bootstrap?

Elusive Icons works just as well without Twitter Bootstrap.

  1. Copy the Elusive Icons directory into your project.
  2. Copy elusive-webfont.less or elusive-webfont.css into your project.
  3. Open your project’s elusive-webfont.less or elusive-webfont.css and edit the font url to ensure it points to the right place (see above example).


  • el-icon-zoom-out
  • el-icon-zoom-in
  • el-icon-youtube
  • el-icon-wrench-alt
  • el-icon-wrench
  • el-icon-wordpress
  • el-icon-wheelchair
  • el-icon-website-alt
  • el-icon-website
  • el-icon-warning-sign
  • el-icon-w3c
  • el-icon-volume-up
  • el-icon-volume-off
  • el-icon-volume-down
  • el-icon-vkontakte
  • el-icon-vimeo
  • el-icon-view-mode
  • el-icon-video-chat
  • el-icon-video-alt
  • el-icon-video
  • el-icon-viadeo
  • el-icon-user
  • el-icon-usd
  • el-icon-upload
  • el-icon-unlock-alt
  • el-icon-unlock
  • el-icon-universal-access
  • el-icon-twitter
  • el-icon-tumblr
  • el-icon-trash-alt
  • el-icon-trash
  • el-icon-torso
  • el-icon-tint
  • el-icon-time-alt
  • el-icon-time
  • el-icon-thumbs-up
  • el-icon-thumbs-down
  • el-icon-th-list
  • el-icon-th-large
  • el-icon-th
  • el-icon-text-width
  • el-icon-text-height
  • el-icon-tasks
  • el-icon-tags
  • el-icon-tag
  • el-icon-stumbleupon
  • el-icon-stop-alt
  • el-icon-stop
  • el-icon-step-forward
  • el-icon-step-backward
  • el-icon-star-empty
  • el-icon-star-alt
  • el-icon-star
  • el-icon-stackoverflow
  • el-icon-spotify
  • el-icon-speaker
  • el-icon-soundcloud
  • el-icon-smiley-alt
  • el-icon-smiley
  • el-icon-slideshare
  • el-icon-skype
  • el-icon-signal
  • el-icon-shopping-cart-sign
  • el-icon-shopping-cart
  • el-icon-share-alt
  • el-icon-share
  • el-icon-search-alt
  • el-icon-search
  • el-icon-screenshot
  • el-icon-screen-alt
  • el-icon-screen
  • el-icon-scissors
  • el-icon-rss
  • el-icon-road
  • el-icon-reverse-alt
  • el-icon-retweet
  • el-icon-return-key
  • el-icon-resize-vertical
  • el-icon-resize-small
  • el-icon-resize-horizontal
  • el-icon-resize-full
  • el-icon-repeat-alt
  • el-icon-repeat
  • el-icon-remove-sign
  • el-icon-remove-circle
  • el-icon-remove
  • el-icon-refresh
  • el-icon-reddit
  • el-icon-record
  • el-icon-random
  • el-icon-quotes-alt
  • el-icon-quotes
  • el-icon-question-sign
  • el-icon-question
  • el-icon-qrcode
  • el-icon-puzzle
  • el-icon-print
  • el-icon-podcast
  • el-icon-plus-sign
  • el-icon-plus
  • el-icon-play-circle
  • el-icon-play-alt
  • el-icon-play
  • el-icon-plane
  • el-icon-pinterest
  • el-icon-picture
  • el-icon-picasa
  • el-icon-photo-alt
  • el-icon-photo
  • el-icon-phone-alt
  • el-icon-phone
  • el-icon-person
  • el-icon-pencil-alt
  • el-icon-pencil
  • el-icon-pause-alt
  • el-icon-pause
  • el-icon-path
  • el-icon-paper-clip-alt
  • el-icon-paper-clip
  • el-icon-opensource
  • el-icon-ok-sign
  • el-icon-ok-circle
  • el-icon-ok
  • el-icon-off
  • el-icon-network
  • el-icon-myspace
  • el-icon-music
  • el-icon-move
  • el-icon-minus-sign
  • el-icon-minus
  • el-icon-mic-alt
  • el-icon-mic
  • el-icon-map-marker-alt
  • el-icon-map-marker
  • el-icon-male
  • el-icon-magnet
  • el-icon-magic
  • el-icon-lock-alt
  • el-icon-lock
  • el-icon-livejournal
  • el-icon-list-alt
  • el-icon-list
  • el-icon-linkedin
  • el-icon-link
  • el-icon-lines
  • el-icon-leaf
  • el-icon-lastfm
  • el-icon-laptop-alt
  • el-icon-laptop
  • el-icon-key
  • el-icon-italic
  • el-icon-iphone-home
  • el-icon-instagram
  • el-icon-info-sign
  • el-icon-indent-right
  • el-icon-indent-left
  • el-icon-inbox-box
  • el-icon-inbox-alt
  • el-icon-inbox
  • el-icon-idea-alt
  • el-icon-idea
  • el-icon-hourglass
  • el-icon-home-alt
  • el-icon-home
  • el-icon-heart-empty
  • el-icon-heart-alt
  • el-icon-heart
  • el-icon-hearing-impaired
  • el-icon-headphones
  • el-icon-hdd
  • el-icon-hand-up
  • el-icon-hand-right
  • el-icon-hand-left
  • el-icon-hand-down
  • el-icon-guidedog
  • el-icon-group-alt
  • el-icon-group
  • el-icon-graph-alt
  • el-icon-graph
  • el-icon-googleplus
  • el-icon-globe-alt
  • el-icon-globe
  • el-icon-glasses
  • el-icon-glass
  • el-icon-github-text
  • el-icon-github
  • el-icon-gift
  • el-icon-gbp
  • el-icon-fullscreen
  • el-icon-friendfeed-rect
  • el-icon-friendfeed
  • el-icon-foursquare
  • el-icon-forward-alt
  • el-icon-forward
  • el-icon-fork
  • el-icon-fontsize
  • el-icon-font
  • el-icon-folder-sign
  • el-icon-folder-open
  • el-icon-folder-close
  • el-icon-folder
  • el-icon-flickr
  • el-icon-flag-alt
  • el-icon-flag
  • el-icon-fire
  • el-icon-filter
  • el-icon-film
  • el-icon-file-new-alt
  • el-icon-file-new
  • el-icon-file-edit-alt
  • el-icon-file-edit
  • el-icon-file-alt
  • el-icon-file
  • el-icon-female
  • el-icon-fast-forward
  • el-icon-fast-backward
  • el-icon-facetime-video
  • el-icon-facebook
  • el-icon-eye-open
  • el-icon-eye-close
  • el-icon-exclamation-sign
  • el-icon-eur
  • el-icon-error-alt
  • el-icon-error
  • el-icon-envelope-alt
  • el-icon-envelope
  • el-icon-eject
  • el-icon-edit
  • el-icon-dribbble
  • el-icon-download-alt
  • el-icon-download
  • el-icon-digg
  • el-icon-deviantart
  • el-icon-delicious
  • el-icon-dashboard
  • el-icon-css
  • el-icon-credit-card
  • el-icon-compass-alt
  • el-icon-compass
  • el-icon-comment-alt
  • el-icon-comment
  • el-icon-cogs
  • el-icon-cog-alt
  • el-icon-cog
  • el-icon-cloud-alt
  • el-icon-cloud
  • el-icon-circle-arrow-up
  • el-icon-circle-arrow-right
  • el-icon-circle-arrow-left
  • el-icon-circle-arrow-down
  • el-icon-child
  • el-icon-chevron-up
  • el-icon-chevron-right
  • el-icon-chevron-left
  • el-icon-chevron-down
  • el-icon-check-empty
  • el-icon-check
  • el-icon-certificate
  • el-icon-cc
  • el-icon-caret-up
  • el-icon-caret-right
  • el-icon-caret-left
  • el-icon-caret-down
  • el-icon-car
  • el-icon-camera
  • el-icon-calendar-sign
  • el-icon-calendar
  • el-icon-bullhorn
  • el-icon-bulb
  • el-icon-brush
  • el-icon-broom
  • el-icon-briefcase
  • el-icon-braille
  • el-icon-bookmark-empty
  • el-icon-bookmark
  • el-icon-book
  • el-icon-bold
  • el-icon-blogger
  • el-icon-blind
  • el-icon-bell
  • el-icon-behance
  • el-icon-barcode
  • el-icon-ban-circle
  • el-icon-backward
  • el-icon-asl
  • el-icon-arrow-up
  • el-icon-arrow-right
  • el-icon-arrow-left
  • el-icon-arrow-down
  • el-icon-align-right
  • el-icon-align-left
  • el-icon-align-justify
  • el-icon-align-center
  • el-icon-adult
  • el-icon-adjust-alt
  • el-icon-adjust
  • el-icon-address-book-alt
  • el-icon-address-book
  • el-icon-asterisk
Download

Comments

Joshua Tenner

Wonderful product. Had more problems with IIS than I had with including the icons in my project.

Thanks for your hard work!

herni chinaski

Thank you very much!!

easy to install, great result

Paulo Mendez

thanks a lot!!

Mateus Neves

This is awesome!!! Tanks!!!

myles

Why is the SVG file empty? There are no vectors when I open it in Illustrator.

Shane Permalloo

Is there a Cheatsheets to get all the unicode of these icons ?

Wajid

icon not working in Mozilla (i am using version 24) Please help me

Adonis K. (Varemenos)

Φοβερός!

J. Bruni

I can't find an "email" or "message" icon with an "envelope" drawing. I've scrolled up and down, quick and slow... what is the icon name? Is it really missing? I can't believe. These icons are fantastic. Thanks a lot.

Eduard Ungureanu

Great Job Thank you for your hard work. Bookmark this page. Cheers.

webapptester

Just one word: Congats!!!!!!

Kevin

Tried to download the Elusive-Icons Webfont's but something seems wrong with the .zip file. After downloading I tried to open the .zip file but tells me that the .zip file might be damaged. Others had these issues?

anhthien8

Hi, It don't work On Mozilla Lasted. Please help !

cool sir

Very good,thank you。

ray

how would i go in adding this in phpbb template ?

ArleyM

Great collection. We started using it with grunt-webfont and ran into some issues I thought I'd share (attached).

1. Some icons (like the bottom half or so) had extra items showing up. In Illustrator I had to remove some layers and paths (I tried to do it programmatically with a find and replace in my code editor, but I think the code ends up being a bit different in every file).

2. The same issue would happen more subtle on other icons (see el-icon-digg, el-icon-fontsize and el-icon-fork).

3. Lastly, I had to manually change the baseline on the el-icon-usd. I did this with some trial and error. I had to change the transform attribute to: transform="matrix(11.27631,0,0,11.27631,10766.039,-4435)"

All this made everything perfect for our font builds. Thought I'd share in case anyone else has issues!

Great icon set!