README

包含 WebSharks 标志/图标及许多其他元素的字体；包括 FontAwesome！查看：演示

包含超过 750 个图标。总文件大小：212kb（与独立的 FontAwesome 136kb 进行比较）。

在 HTML 标记中使用图标

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

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

简写类名（使用 si- 而不是 sharkicon-）

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

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

通过 SCSS 包含类

注意： Bourbon 是必需的依赖项。详情请参见：http://bourbon.io/

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

通过 SCSS 创建自定义类（使用 prefix 而不是 si）

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

通过 SCSS 定域类

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

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

通过 SCSS 创建图标

注意：如果您愿意，可以不包含 sharkicon-[long|short]-classes 来做这件事。

@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);
}

等价于

.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;
}

或者，您还可以传递第二个参数给 sharkicon() 来设置 before/after 规范。默认值是 before。在某些特殊情况下，您可能希望将其更改为 after。

@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);
}

等价于

.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;
}

通过 SCSS 映射图标字符

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