README

这个仓库已被废弃！

优雅图标字体

Composer/Component Package提供著名的优雅图标字体库，包含360个图标，支持较少。由http://www.elegantthemes.com/blog/resources/elegant-icon-font创建。

图标列表

查看demo/demo.html以获取图标完整列表，或访问http://www.elegantthemes.com/blog/resources/elegant-icon-font。

Sass使用

1. 在您的代码中导入elegant-icons-sass

@import 'elegant-icons-sass';

默认情况下，只有字体格式的woff和woff2（为什么？）将从CDN（使用RawGit）拉取。如果您想使用不同的格式和/或本地字体，请查看下面的自定义部分。

使用

要使用图标，您需要它们的名称，您可以在这里找到它们（在unicode参考列表之后）。

上述列表中的unicode参考旨在用作data-icon，在此sass版本中已移除支持，因为它被认为是一种不良实践，因为性能问题。如果您想使用这种方式，您必须自己定义它。

在列表中，您会发现几乎所有的图标名称中都有icon_前缀，这看起来是多余的和不必要的。在此Sass版本中，您可以省略它（如下面的例子所示），但对于向后兼容性，它们仍然是所有使用类型的有效选择器（mixin、占位符或类）。

默认情况下，图标将被定义为::before伪元素。如果您想更改此默认值，请查看下面的自定义部分。

作为mixin

在您的选择器中包含mixin

.my-selector {
  @include elegant-icon('arrow_up');  
}

您可以通过传递它作为第二个参数来覆盖图标的默认位置

.my-selector {
  @include elegant-icon('question', 'after');  
}

作为占位符

使用占位符扩展您的选择器

.my-selector {
  @extend %ei-contacts_alt;
}

当用作占位符时，必须使用前缀ei-。请查看下面的自定义部分，了解如何更改或删除此前缀。

作为类

如果您只想将其作为类使用，您必须首先激活类生成功能（请参考下方的自定义部分了解如何激活。）

激活后，您只需将图标类名称设置为您的HTML元素即可

<span class="ei-plus"></span>

当用作类时，必须使用前缀ei-。请参考下方的自定义部分了解如何更改或删除此前缀。

自定义

优雅图标库的Sass版本定义了一些默认值，这些被认为是最佳实践或常见用例。如果您想覆盖它们，请按照以下步骤操作

下方的覆盖必须在使用部分的步骤2中解释的导入之前完成。

激活类选择器

$ei-generate-classes: true;

// Default value: false

使用不同的选择器前缀

$ei-icon-prefix: 'my-prefix-';

// Default value: 'ei-'

如果您不想使用前缀，将其设置为空字符串：$ei-icon-prefix: '';

将图标位置设置为::after

$ei-default-placement: 'after';

// Default value: 'before'

$ei-default-placement变量只能设置为'before'或'after'，这将分别将其定义为::before或::after伪元素。

使用不同的字体格式

// All formats:
$ei-font-formats: eot woff2 woff ttf svg;

// Default value: woff woff2

您可以从上方的示例列表中选择您需要的任何格式组合。

使用本地字体

1. 激活本地字体使用

$ei-use-local-fonts: true;

1. 覆盖字体路径变量

// Example:
$ei-font-path: '../assets/fonts/elegant-icons/';

// Default value: '/fonts'

请注意，上述路径必须相对于生成的CSS文件是相对的，因为它在@font-face定义中被用作正常的src: url()。

1. （可选）更改字体文件名

$ei-font-filename: 'my-custom-icons-filename';

// Default value: 'ElegantIcons'

如果您只是复制字体文件且没有重命名它们，请不要覆盖此设置。

1. （可选）更改字体族名称

$ei-font-family: 'My-Custom-Icons-Family-Name';

// Default value: 'ElegantIcons'

仅当您想为图标字体定义不同的字体族名称时才进行覆盖。

您可能需要自己从node_modules/elegant-icons-sass/fonts文件夹中复制字体文件。您可以为此使用您选择的构建系统。

原始图像文件

原始图像文件（SVG和PNG格式）可以在仓库的图像文件夹中找到。