WebSharks™ Icon Font (Sharkicons)

Font containing WebSharks logos/icons + many others; including FontAwesome! See: DEMO

Contains over 750 icons. Total file size: 212kb (compare to stand-alone FontAwesome @ 136kb).

---

---

Using Icons in HTML Markup

<link rel="stylesheet" type="text/css" href="/path/to/sharkicons/src/long-classes.min.css" />

<i class="sharkicon sharkicon-broom"></i>

---

Short Classes (si- instead of sharkicon-)

<link rel="stylesheet" type="text/css" href="/path/to/sharkicons/src/short-classes.min.css" />

<i class="si si-broom"></i>

---

Including Classes via SCSS

Note: Bourbon is a required dependency. See: http://bourbon.io/ for details.

@import '/path/to/bourbon';
@import '/path/to/sharkicons/src/sharkicons';
@include sharkicons-font('/path/to/sharkicons/src');
@include sharkicon-short-classes;

---

Custom Classes via SCSS (prefix instead of si)

@import '/path/to/bourbon';
@import '/path/to/sharkicons/src/sharkicons';
@include sharkicons-font('/path/to/sharkicons/src');
@include sharkicon-custom-classes(prefix);

---

Scoping Classes via SCSS

@import '/path/to/bourbon';
@import '/path/to/sharkicons/src/sharkicons';
@include sharkicons-font('/path/to/sharkicons/src');

.my-product {
  @include sharkicon-short-classes;
}

---

Creating an Icon via SCSS

Note: you can do this without including the sharkicon-[long|short]-classes if you like.

@import '/path/to/bourbon';
@import '/path/to/sharkicons/src/sharkicons';
@include sharkicons-font('/path/to/sharkicons/src');
// @include sharkicon-short-classes;

.my-product .my-icon {
  @include sharkicon(broom);
}

Equivalent to:

.my-product .my-icon::before {
  content:                    '\e000';
  font:                       normal normal normal 14px/1 sharkicons;
  text-rendering:             optimizeLegibility;
  -webkit-font-smoothing:     antialiased;
  font-smoothing:             antialiased;
  display:                    inline-block;
  font-size:                  inherit;
  text-decoration:            inherit;
  text-transform:             none;
}

Alternatively, you can pass a second argument to sharkicon() to set the before/after specification. The default value is before. You might want to change it to after in some special case.

@import '/path/to/bourbon';
@import '/path/to/sharkicons/src/sharkicons';
@include sharkicons-font('/path/to/sharkicons/src');
// @include sharkicon-short-classes;

.my-product .my-icon {
  @include sharkicon(broom, after);
}

Equivalent to:

.my-product .my-icon::after {
  content:                    '\e000';
  font:                       normal normal normal 14px/1 sharkicons;
  text-rendering:             optimizeLegibility;
  -webkit-font-smoothing:     antialiased;
  font-smoothing:             antialiased;
  display:                    inline-block;
  font-size:                  inherit;
  text-decoration:            inherit;
  text-transform:             none;
}

---

Mapping An Icon Char via SCSS

.my-product .my-icon:hover::after {
  content:                    map-get($sharkicons, broom);
}