Take your WordPress development to new heights. Check out Redux Framework, from the makers of Elusive Icons.

  Examples

Lots of easy ways to use Elusive Icons

After you get up and running, you can place Elusive Icons icons just about anywhere with the <i> tag. Some examples appreciatively re-used from the Bootstrap documentation.

el-camera-retro

You can place Elusive Icons icons just about anywhere using the CSS Prefix fa and the icon's name. Elusive Icons is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<i class="el el-camera-retro"></i> el-camera-retro
  • If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

el-lg

el-2x

el-3x

el-4x

el-5x

To increase icon sizes relative to their container, use the el-lg (33% increase), el-2x, el-3x, el-4x, or el-5x classes.

<i class="el el-camera-retro el-lg"></i> el-lg
<i class="el el-camera-retro el-2x"></i> el-2x
<i class="el el-camera-retro el-3x"></i> el-3x
<i class="el el-camera-retro el-4x"></i> el-4x
<i class="el el-camera-retro el-5x"></i> el-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use el-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="el el-home el-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="el el-book el-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="el el-pencil el-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="el el-cog el-fw"></i>&nbsp; Settings</a>
</div>
  • List icons
  • can be used
  • as bullets
  • in lists

Use el-ul and el-li to easily replace default bullets in unordered lists.

<ul class="el-ul">
  <li><i class="el-li fa el-check-square"></i>List icons</li>
  <li><i class="el-li fa el-check-square"></i>can be used</li>
  <li><i class="el-li fa el-spinner el-spin"></i>as bullets</li>
  <li><i class="el-li fa el-square"></i>in lists</li>
</ul>

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use el-border and pull-right or pull-left for easy pull quotes or article icons.

<i class="el el-quote-left el-3x pull-left el-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

Use the el-spin class to get any icon to rotate, and use el-pulse to have it rotate with 8 steps. Works well with el-spinner, el-refresh, and el-cog.

<i class="el el-spinner el-spin"></i>
<i class="el el-circle-o-notch el-spin"></i>
<i class="el el-refresh el-spin"></i>
<i class="el el-cog el-spin"></i>
<i class="el el-spinner el-pulse"></i>

CSS3 animations aren't supported in IE8 - IE9.

  normal
  el-rotate-90
  el-rotate-180
  el-rotate-270
  el-flip-horizontal
  el-flip-vertical

To arbitrarily rotate and flip icons, use the el-rotate-* and el-flip-* classes.

<i class="el el-shield"></i> normal<br>
<i class="el el-shield el-rotate-90"></i> el-rotate-90<br>
<i class="el el-shield el-rotate-180"></i> el-rotate-180<br>
<i class="el el-shield el-rotate-270"></i> el-rotate-270<br>
<i class="el el-shield el-flip-horizontal"></i> el-flip-horizontal<br>
<i class="el el-shield el-flip-vertical"></i> icon-flip-vertical
el-twitter on el-square-o
el-flag on el-circle
el-terminal on el-square
el-ban on el-camera

To stack multiple icons, use the el-stack class on the parent, the el-stack-1x for the regularly sized icon, and el-stack-2x for the larger icon. el-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="el-stack el-lg">
  <i class="el el-square-o el-stack-2x"></i>
  <i class="el el-twitter el-stack-1x"></i>
</span>
el-twitter on el-square-o<br>
<span class="el-stack el-lg">
  <i class="el el-circle el-stack-2x"></i>
  <i class="el el-flag el-stack-1x el-inverse"></i>
</span>
el-flag on el-circle<br>
<span class="el-stack el-lg">
  <i class="el el-square el-stack-2x"></i>
  <i class="el el-terminal el-stack-1x el-inverse"></i>
</span>
el-terminal on el-square<br>
<span class="el-stack el-lg">
  <i class="el el-camera el-stack-1x"></i>
  <i class="el el-ban el-stack-2x text-danger"></i>
</span>
el-ban on el-camera

Elusive Icons works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="el el-trash-o el-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="el el-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="el el-flag el-2x pull-left"></i> Elusive Icons<br>Version 2.0.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="el el-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="el el-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="el el-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="el el-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="el el-envelope-o el-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="el el-key el-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="el el-user el-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="el el-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="el el-pencil el-fw"></i> Edit</a></li>
    <li><a href="#"><i class="el el-trash-o el-fw"></i> Delete</a></li>
    <li><a href="#"><i class="el el-ban el-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Anything you can do with CSS font styles, you can do with Elusive Icons.

Star Ratings (inspired by CSS Tricks)