BootKit home · Manual home

ICONS

Adding extra styles to SVG icon sets using background, foreground and border classes.
Icons are styled by applying classes to the parent element of the actual icon HTML code.
Font Awesome is used as it is the most popular SVG icon set (also works with Glyphicons).


Available classes

Each icon size also has a specific set of classes that make sure the line-height on each styled icon is correct.

Example

Both examples use bk-round to turn it into a circle.
The example on the left uses bk-bd-danger to give it a border.
The example on the right uses bk-bg-danger and bk-fg-white to give it a unique background and foreground color.
bk-bd-off is added to correct line-height when a border is not needed. You can also put bk-bd-danger here, but it seems silly to define a border when it is not explicitly needed.

<span class="bk-icon bk-icon-default bk-round bk-bd-danger">
    <i class="fa fa-clock-o"></i>
</span>

<span class="bk-icon bk-icon-default bk-round bk-bg-danger bk-fg-white bk-bd-off bk-mg-l-5">
    <i class="fa fa-clock-o"></i>
</span>

- The icon itself is surrounded by a wrapper which receives all the classes. This can be a div, span, etc.
- Icons are using inline-block so use the class .clearfix when needed.
- It is imperative to add bk-bd-off to all icons where you do not need a border color that is different from the background color. The reason is that the line-height will be slightly adjusted to center the icon correctly vertically.

Sizing

There are 6 different icon sizes available. Font Awesome sizing classes are used to determine icon size for the 2X to 5x icon classes.

14 pixels - bk-icon-default

<span class="bk-icon bk-icon-default bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o"></i>
</span>

24 pixels - bk-icon-24

<span class="bk-icon bk-icon-24 bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o"></i>
</span>

2 em - bk-icon-2x and on the icon itself use fa-2x

<span class="bk-icon bk-icon-2x bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-2x"></i>
</span>

3 em - bk-icon-3x and on the icon itself use fa-3x

<span class="bk-icon bk-icon-3x bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

4 em - bk-icon-4x and on the icon itself use fa-4x

<span class="bk-icon bk-icon-4x bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-4x"></i>
</span>

5 em - bk-icon-5x and on the icon itself use fa-5x

<span class="bk-icon bk-icon-5x bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-5x"></i>
</span>

Shapes

3 different shapes are available: by default by applying bk-icon the border radius is equal to the @border-radius-base LESS variable in Bootstrap. We can also apply bk-round for circular icons and bk-rd-off for square shapes.

Default rounded corners

<span class="bk-icon bk-icon-3x bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

Circular - bk-round

<span class="bk-icon bk-icon-3x bk-round bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

Square - bk-rd-off

<span class="bk-icon bk-icon-3x bk-rd-off bk-bg-danger bk-fg-white bk-bd-off">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

Border thickness

5 border sizes are avilable from 1 to 5 pixels wide. borders are inset by default in HTML so the size of the styled icon will not differ from for example one with no borders and only background color. Line-height will be adjusted according to the border thickness.

1 pixel

<span class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-fg-danger">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

2 pixels - bk-bd-2x

<span class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-bd-2x bk-fg-danger">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

3 pixels - bk-bd-3x

<span class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-bd-3x bk-fg-danger">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

4 pixels - bk-bd-4x

<span class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-bd-4x bk-fg-danger">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

5 pixels - bk-bd-5x

<span class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-bd-5x bk-fg-danger">
    <i class="fa fa-clock-o fa-3x"></i>
</span>

Hover effects

As with all widget elements we can apply a darker or lighter effect when hovering over the BootKit icon.

Border

In this specific example we use bk-bd-darken and also for the icon color we apply bk-fg-darken.

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bd-danger bk-bd-darken bk-bd-5x bk-fg-danger bk-fg-darken">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

Background

In the example on the left we use bk-bg-darken, in the one on the right bk-bg-lighten.

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-danger bk-bg-darken bk-bd-off bk-fg-white">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-danger bk-bg-lighten bk-bd-off bk-fg-white bk-mg-l-5">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

Foreground

And here we simple use bk-fg-danger and bk-fg-darken or bk-fg-lighten to get the desired effect.

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-white bk-bd-off bk-fg-danger bk-fg-darken">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-white bk-bd-off bk-fg-danger bk-fg-lighten bk-mg-l-5">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

Border

And here we simple use bk-fg-danger and bk-fg-darken or bk-fg-lighten to get the desired effect.

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-white bk-fg-danger bk-bd-3x bk-bd-danger bk-bd-darken">
    <i class="fa fa-clock-o fa-3x"></i>
</a>

<a href="javascript:" class="bk-icon bk-icon-3x bk-round bk-bg-white bk-fg-danger bk-bd-3x bk-bd-danger bk-bd-lighten">
    <i class="fa fa-clock-o fa-3x"></i>
</a>